diff --git a/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze.ts b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze.ts
index 4c68386e74..65641c9de9 100644
--- a/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze.ts
@@ -18,9 +18,9 @@ export interface BudgetUsageAnalyzeResult {
     project_id?: string;
     workspace_id?: string;
     data_source_id?: string;
-    provider_filter?: {
-        state?: string;
-        providers?: string[];
-    };
+    // provider_filter?: {
+    //     state?: string;
+    //     providers?: string[];
+    // };
     resource_group: Extract<ResourceGroupType, 'WORKSPACE' | 'PROJECT'>;
 }
diff --git a/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/list.ts
index 5a4111eaeb..0a082cdf65 100644
--- a/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/list.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/list.ts
@@ -9,4 +9,5 @@ export interface BudgetUsageListParameters {
     data_source_id?: string;
     workspace_id?: string;
     project_id?: string;
+    service_account_id?: string;
 }
diff --git a/apps/web/src/api-clients/cost-analysis/budget-usage/schema/model.ts b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/model.ts
index 099704073c..7031ca1fdb 100644
--- a/apps/web/src/api-clients/cost-analysis/budget-usage/schema/model.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/model.ts
@@ -3,10 +3,10 @@ import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { Currency } from '@/store/display/type';
 
 
-interface ProviderFilter {
-    providers: string[];
-    state: 'ENABLED' | 'DISABLED';
-}
+// interface ProviderFilter {
+//     providers: string[];
+//     state: 'ENABLED' | 'DISABLED';
+// }
 
 export interface BudgetUsageModel {
     budget_id: string;
@@ -15,11 +15,11 @@ export interface BudgetUsageModel {
     cost: number;
     limit: number;
     currency: Currency;
-    provider_filter?: ProviderFilter;
     data_source_id: string;
     resource_group: Extract<ResourceGroupType, 'WORKSPACE'|'PROJECT'>;
     project_id: string;
     workspace_id: string;
+    service_account_id: string;
     domain_id: string;
     updated_at: string;
 }
diff --git a/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/create.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/create.ts
index 23f7c15dfd..fcd2ec3583 100644
--- a/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/create.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/create.ts
@@ -1,21 +1,25 @@
 import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
-    BudgetNotification, BudgetPlannedLimit, BudgetTimeUnit, ProviderFilter,
+    BudgetNotification, BudgetPlannedLimit, BudgetTimeUnit,
 } from '@/api-clients/cost-analysis/budget/schema/type';
 
+import type { Currency } from '@/store/display/type';
+
 export interface BudgetCreateParameters {
-    data_source_id: string;
     name?: string;
     limit?: number;
     planned_limits?: BudgetPlannedLimit[];
-    provider_filter?: ProviderFilter;
+    currency: Currency;
     time_unit: BudgetTimeUnit;
     start: string;
     end: string;
-    notifications?: BudgetNotification[];
+    notification?: BudgetNotification;
     tags?: Tags;
     resource_group: Extract<ResourceGroupType, 'WORKSPACE'|'PROJECT'>;
     workspace_id?: string;
     project_id?: string;
+    service_account_id?: string;
+    budget_manager_id?: string;
+    budget_year?: string;
 }
diff --git a/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/set-notification.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/set-notification.ts
index 050fac8446..78a5737f97 100644
--- a/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/set-notification.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/set-notification.ts
@@ -2,5 +2,5 @@ import type { BudgetNotification } from '@/api-clients/cost-analysis/budget/sche
 
 export interface BudgetSetNotificationParameters {
     budget_id: string;
-    notifications: BudgetNotification[];
+    notification: BudgetNotification;
 }
diff --git a/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/update.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/update.ts
index eebbefe2f3..a12da39dcf 100644
--- a/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/update.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/update.ts
@@ -6,5 +6,8 @@ export interface BudgetUpdateParameters {
     name?: string;
     limit?: number;
     planned_limits?: BudgetPlannedLimit[];
+    start?: string;
+    end?: string;
+    utilization_rate?: number;
     tags?: Tags;
 }
diff --git a/apps/web/src/api-clients/cost-analysis/budget/schema/model.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/model.ts
index 0ad8166b9d..a1973e32ae 100644
--- a/apps/web/src/api-clients/cost-analysis/budget/schema/model.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget/schema/model.ts
@@ -1,29 +1,35 @@
+
 import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
-    BudgetNotification, BudgetPlannedLimit, BudgetTimeUnit, ProviderFilter,
+    BudgetNotification,
+    BudgetPlannedLimit,
+    BudgetTimeUnit,
 } from '@/api-clients/cost-analysis/budget/schema/type';
 
 import type { Currency } from '@/store/display/type';
 
-
 export interface BudgetModel {
-    budget_id: string;
-    name: string;
-    limit: number;
-    planned_limits: BudgetPlannedLimit[];
-    currency: Currency;
-    provider_filter: ProviderFilter;
-    time_unit: BudgetTimeUnit;
-    start: string;
-    end: string;
-    notifications: BudgetNotification[];
-    tags: Tags;
-    data_source_id: string;
-    resource_group: Extract<ResourceGroupType, 'WORKSPACE' | 'PROJECT'>
-    project_id: string;
-    workspace_id: string;
-    domain_id: string;
-    created_at: string;
-    updated_at: string;
+  budget_id: string;
+  name: string;
+  limit: number;
+  planned_limits: BudgetPlannedLimit[];
+  currency: Currency;
+  time_unit: BudgetTimeUnit;
+  start: string;
+  end: string;
+  notification: BudgetNotification;
+  tags: Tags;
+  data_source_id: string;
+  resource_group: Extract<ResourceGroupType, 'WORKSPACE' | 'PROJECT'>;
+  project_id: string;
+  workspace_id: string;
+  service_account_id: string;
+  budget_manager_id: string;
+  domain_id: string;
+  created_at: string;
+  updated_at: string;
+  budget_year: string;
+  notified_month: string;
+  utilization_rate: number;
 }
diff --git a/apps/web/src/api-clients/cost-analysis/budget/schema/type.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/type.ts
index 65bd3a42cb..7c2ad9e8ba 100644
--- a/apps/web/src/api-clients/cost-analysis/budget/schema/type.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget/schema/type.ts
@@ -1,11 +1,20 @@
 export type BudgetTimeUnit = 'MONTHLY' | 'TOTAL';
-type BudgetNotificationType = 'CRITICAL' | 'WARNING';
-type BudgetNotificationUnit = 'PERCENT' | 'ACTUAL_COST';
+type BudgetNotificationUnit = 'PERCENT';
+type BudgetNotificationState = 'ENABLED' | 'DISABLED';
 
-export interface BudgetNotification {
+interface BudgetNotificationPlan {
     threshold: number;
     unit: BudgetNotificationUnit;
-    notification_type: BudgetNotificationType;
+}
+
+export interface BudgetNotificationRecipients {
+    users: string[];
+}
+
+export interface BudgetNotification {
+    state: BudgetNotificationState;
+    plans?: BudgetNotificationPlan[];
+    recipients?: BudgetNotificationRecipients;
 }
 
 export interface BudgetPlannedLimit {
diff --git a/apps/web/src/api-clients/identity/service-account/schema/api-verbs/create.ts b/apps/web/src/api-clients/identity/service-account/schema/api-verbs/create.ts
index cef311f12b..a952cbcd76 100644
--- a/apps/web/src/api-clients/identity/service-account/schema/api-verbs/create.ts
+++ b/apps/web/src/api-clients/identity/service-account/schema/api-verbs/create.ts
@@ -7,6 +7,7 @@ export interface ServiceAccountCreateParameters {
     secret_schema_id?: string;
     secret_data?: Record<string, any>;
     tags?: Tags;
+    service_account_mgr_id?: string;
     trusted_account_id?: string;
     project_id: string;
 }
diff --git a/apps/web/src/api-clients/identity/service-account/schema/api-verbs/update.ts b/apps/web/src/api-clients/identity/service-account/schema/api-verbs/update.ts
index ce80ea285e..5cdd4b676e 100644
--- a/apps/web/src/api-clients/identity/service-account/schema/api-verbs/update.ts
+++ b/apps/web/src/api-clients/identity/service-account/schema/api-verbs/update.ts
@@ -5,5 +5,6 @@ export interface ServiceAccountUpdateParameters {
     name?: string;
     data?: Record<string, any>;
     tags?: Tags;
+    service_account_mgr_id?: string;
     project_id?: string;
 }
diff --git a/apps/web/src/api-clients/identity/service-account/schema/model.ts b/apps/web/src/api-clients/identity/service-account/schema/model.ts
index 4beb378887..8e264cf38b 100644
--- a/apps/web/src/api-clients/identity/service-account/schema/model.ts
+++ b/apps/web/src/api-clients/identity/service-account/schema/model.ts
@@ -20,6 +20,7 @@ export interface ServiceAccountModel {
     created_at: string;
     last_synced_at: string;
     state: ServiceAccountType;
+    service_account_mgr_id: string;
     // asset_info: ServiceAccountAssetInfoType;
     // cost_info: ServiceAccountCostInfoType;
 }
diff --git a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
index b7023f4846..266f1163e5 100644
--- a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
+++ b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
@@ -53,6 +53,7 @@ interface Props {
     styleType?: string;
     appearanceType?: 'stack'|'badge';
     showDeleteAllButton?: boolean;
+    showDropdownLeftArea?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -73,6 +74,7 @@ const props = withDefaults(defineProps<Props>(), {
     styleType: undefined,
     appearanceType: undefined,
     showDeleteAllButton: undefined,
+    showDropdownLeftArea: false,
 });
 
 const emit = defineEmits<{(e: 'select', value: ProjectTreeNodeData[]): void;
@@ -321,6 +323,14 @@ watch(() => state._selectedProjectIds, (selectedProjectIds) => {
                            @update:visible-menu="handleUpdateVisibleMenu"
                            @delete-tag="handleDeleteTag"
         >
+            <template v-if="props.showDropdownLeftArea"
+                      #dropdown-left-area
+            >
+                <p-i name="ic_project"
+                     width="1rem"
+                     height="1rem"
+                />
+            </template>
             <template #menu-no-data-format>
                 <div />
             </template>
diff --git a/apps/web/src/common/modules/user/UserSelectDropdown.vue b/apps/web/src/common/modules/user/UserSelectDropdown.vue
index 5770c65970..cb3faf3f51 100644
--- a/apps/web/src/common/modules/user/UserSelectDropdown.vue
+++ b/apps/web/src/common/modules/user/UserSelectDropdown.vue
@@ -52,6 +52,8 @@ const props = withDefaults(defineProps<{
      showCategoryTitle?: boolean;
      placeholder?: string;
      excludedSelectedIds?: string[];
+     size?: 'sm'|'md';
+     pageSize?: number;
 }>(), {
     selectedId: undefined,
     selectedIds: undefined,
@@ -71,6 +73,8 @@ const props = withDefaults(defineProps<{
     showCategoryTitle: true,
     placeholder: 'Select',
     excludedSelectedIds: undefined,
+    size: 'md',
+    pageSize: 10,
 });
 
 const emit = defineEmits<{(event: 'update:selected-id', value?: string): void;
@@ -267,7 +271,6 @@ watch([() => props.selectedId, () => props.selectedIds], ([newUserId, newUserIds
 
 <template>
     <p-select-dropdown class="user-select-dropdown"
-                       page-size="10"
                        show-select-marker
                        is-filterable
                        show-delete-all-button
@@ -283,6 +286,8 @@ watch([() => props.selectedId, () => props.selectedIds], ([newUserId, newUserIds
                        :style-type="props.styleType"
                        :placeholder="props.placeholder"
                        :block="props.block"
+                       :size="props.size"
+                       :page-size="props.pageSize"
                        @update:selected="handleUpdateSelectedUserItems"
     >
         <template v-if="props.appearanceType === 'stack'"
diff --git a/apps/web/src/services/cost-explorer/components/BudgetAlertsModal.vue b/apps/web/src/services/cost-explorer/components/BudgetAlertsModal.vue
new file mode 100644
index 0000000000..4fba33b936
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetAlertsModal.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { PButtonModal } from '@cloudforet/mirinae';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+
+interface Props {
+    visible: boolean;
+    budgetOnOffValue: boolean;
+}
+
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetPageStore.$state;
+
+const props = withDefaults(defineProps<Props>(), {
+    visible: false,
+    budgetOnOffValue: false,
+});
+
+const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
+}>();
+
+const setNotification = async () => {
+    try {
+        await budgetPageStore.updateBudgetNotifications({
+            budget_id: budgetPageState.budgetData?.budget_id ?? '',
+            notification: {
+                ...budgetPageState.budgetData?.notification,
+                state: !props.budgetOnOffValue ? 'ENABLED' : 'DISABLED',
+            },
+        });
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+const handleClose = () => {
+    emit('update:visible', false);
+};
+
+const handleConfirm = () => {
+    setNotification();
+    emit('update:visible', false);
+};
+</script>
+
+<template>
+    <p-button-modal :visible="props.visible"
+                    :header-title="$t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.UPDATE_BUDGET_ALERT')"
+                    size="sm"
+                    @cancel="handleClose"
+                    @close="handleClose"
+                    @confirm="handleConfirm"
+    >
+        <template #body>
+            <div v-if="props.budgetOnOffValue">
+                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.BUDGET_ALERT_MODAL_DESC1') }}
+            </div>
+            <div v-else-if="!props.budgetOnOffValue">
+                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.BUDGET_ALERT_MODAL_DESC2') }}
+            </div>
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlan.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlan.vue
index a142221bc4..0b94359de4 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlan.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlan.vue
@@ -99,7 +99,7 @@ watch([() => state.amountPlanInfo, () => state.isAllValid], ([amountPlanInfo, is
     <p-pane-layout class="budget-create-form-amount-plan">
         <p-heading class="pt-8 px-4 pb-4"
                    heading-type="sub"
-                   :title="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.AMOUNT_PLAN.AMOUNT_PLANNING')"
+                   :title="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.BUDGET_DETAILS.TITLE')"
         />
         <div class="p-4">
             <budget-create-period-select
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateManagerSelect.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateManagerSelect.vue
new file mode 100644
index 0000000000..e91c20342e
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateManagerSelect.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { PFieldGroup } from '@cloudforet/mirinae';
+
+import type { ServiceAccountGetParameters } from '@/api-clients/identity/service-account/schema/api-verbs/get';
+import type { ServiceAccountModel } from '@/api-clients/identity/service-account/schema/model';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
+
+import { useBudgetCreatePageStore } from '../stores/budget-create-page-store';
+
+const budgetCreatePageStore = useBudgetCreatePageStore();
+const budgetCreatePageState = budgetCreatePageStore.state;
+
+const handleSelectId = (selectedId: string|undefined) => {
+    if (selectedId) budgetCreatePageStore.setBudgetManager(selectedId);
+};
+
+const handleFormatBudgetManager = (value: Record<string, any>) => {
+    if (Array.isArray(value.USER) && value.USER.length === 0) {
+        budgetCreatePageStore.setBudgetManager('');
+    }
+};
+
+const fetchSelectedServiceAccount = async (serviceAccountId: string) => {
+    try {
+        const result = await SpaceConnector.clientV2.identity.serviceAccount.get<ServiceAccountGetParameters, ServiceAccountModel>({
+            service_account_id: serviceAccountId,
+        });
+        if (result.service_account_mgr_id.length > 0) {
+            budgetCreatePageStore.setBudgetManager(result.service_account_mgr_id);
+        }
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+watch(() => budgetCreatePageState.scope.serviceAccount, async () => {
+    if (budgetCreatePageState.scope.serviceAccount) {
+        await fetchSelectedServiceAccount(budgetCreatePageState.scope.serviceAccount);
+    }
+}, { immediate: true, deep: true });
+</script>
+
+<template>
+    <p-field-group required
+                   :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BUDGET_MANAGER')"
+    >
+        <user-select-dropdown
+            show-user-list
+            :show-user-group-list="false"
+            :selected-id="budgetCreatePageState.budgetManager"
+            @update:selected-id="handleSelectId"
+            @formatted-selected-ids="handleFormatBudgetManager"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateScopeSelect.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateScopeSelect.vue
new file mode 100644
index 0000000000..5029d4b34f
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateScopeSelect.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import {
+    computed, reactive, watch, watchEffect,
+} from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import {
+    PFieldGroup, PSelectDropdown, PRadioGroup, PRadio,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { BudgetListParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/list';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
+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 { i18n } from '@/translations';
+
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useBudgetCreatePageStore } from '../stores/budget-create-page-store';
+
+const allReferenceStore = useAllReferenceStore();
+const budgetCreatePageStore = useBudgetCreatePageStore();
+const budgetCreatePageState = budgetCreatePageStore.state;
+
+const serviceAccount = computed(() => allReferenceStore.getters.serviceAccount);
+
+const state = reactive({
+    isSelectable: false,
+    isRadioDisable: false,
+    scopeList: [
+        { name: 'project', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.PROJECT') },
+        { name: 'serviceAccount', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SERVICE_ACCOUNT') },
+    ],
+    selectedScope: 0,
+    serviceAccountList: [] as string[],
+    existingServiceAccountIds: [],
+    refinedServiceAccountList: computed<SelectDropdownMenuItem[]>(() => state.serviceAccountList
+        .filter((serviceAccountId) => state.existingServiceAccountIds?.length > 0 && !state.existingServiceAccountIds.includes(serviceAccountId))
+        .map((serviceAccountId) => ({
+            name: serviceAccountId,
+            label: serviceAccount.value[serviceAccountId].label,
+        }))),
+    selectedServiceAccount: '',
+});
+
+const fetchBudget = async () => {
+    try {
+        const { results } = await SpaceConnector.clientV2.costAnalysis.budget.list<BudgetListParameters, ListResponse<BudgetModel>>();
+        state.existingServiceAccountIds = results?.map((result) => result.service_account_id) ?? [];
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+watchEffect(async () => {
+    await fetchBudget();
+});
+
+watch(() => budgetCreatePageState.project, async () => {
+    const { results } = await SpaceConnector.clientV2.identity.serviceAccount.list<ServiceAccountListParameters, ListResponse<ServiceAccountModel>>({
+        project_id: budgetCreatePageState.project,
+    });
+    state.serviceAccountList = results?.map((result) => result.service_account_id) ?? [];
+}, { deep: true, immediate: true });
+
+watch(() => budgetCreatePageState.scope, () => {
+    state.isSelectable = budgetCreatePageState.scope.type === 'serviceAccount';
+    if (budgetCreatePageState.scope.type === 'project') {
+        budgetCreatePageState.scope.serviceAccount = '';
+    }
+}, { deep: true, immediate: true });
+
+watch(() => budgetCreatePageState.project, () => {
+    if (budgetCreatePageState.project.length > 0) {
+        state.isRadioDisable = true;
+    } else {
+        state.isRadioDisable = false;
+    }
+}, { deep: true, immediate: true });
+</script>
+
+<template>
+    <p-field-group required
+                   :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SCOPE')"
+    >
+        <p-radio-group>
+            <p-radio v-for="(scope, idx) in state.scopeList"
+                     :key="`budget-scope-${idx}`"
+                     v-model="budgetCreatePageState.scope.type"
+                     :value="scope.name"
+                     class="mb-1"
+                     :disabled="!state.isRadioDisable"
+            >
+                <span class="radio-item">
+                    {{ scope.label }}
+                </span>
+            </p-radio>
+        </p-radio-group>
+        <p-select-dropdown block
+                           :disabled="!state.isSelectable"
+                           :menu="state.refinedServiceAccountList"
+                           :selected.sync="budgetCreatePageState.scope.serviceAccount"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateStep1.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateStep1.vue
new file mode 100644
index 0000000000..0a4b6d5361
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateStep1.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import type { ComputedRef } from 'vue';
+import {
+    computed, reactive, watch, watchEffect,
+} from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import {
+    PFieldGroup, PTextInput, PButton,
+} from '@cloudforet/mirinae';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { BudgetListParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/list';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
+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 { i18n } from '@/translations';
+
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
+
+import { useBudgetCreatePageStore } from '../stores/budget-create-page-store';
+import BudgetCreateManagerSelect from './BudgetCreateManagerSelect.vue';
+import BudgetCreateScopeSelect from './BudgetCreateScopeSelect.vue';
+
+
+const budgetCreatePageStore = useBudgetCreatePageStore();
+const budgetCreatePageState = budgetCreatePageStore.state;
+const allReferenceStore = useAllReferenceStore();
+
+interface BudgetCreateStep1State {
+    scope: Record<string, any>;
+    isContinueAble: boolean;
+    name: string;
+    projectList: any[];
+    selectedProject: string;
+    serviceAccountList: string[];
+    budgetList: BudgetModel[];
+    budgetNames: string[];
+    existingProjectIds: string[];
+    existingBudgetYears: number[];
+    projectInvalidText: ComputedRef<string|TranslateResult>;
+    projectInvalid: ComputedRef<boolean>;
+}
+
+const project = computed<ProjectReferenceMap>(() => allReferenceStore.getters.project);
+
+const state = reactive<BudgetCreateStep1State>({
+    scope: {},
+    isContinueAble: false,
+    name: '',
+    projectList: [],
+    selectedProject: '',
+    serviceAccountList: [],
+    budgetList: [],
+    budgetNames: [],
+    existingProjectIds: [],
+    existingBudgetYears: [],
+    projectInvalidText: computed<string|TranslateResult>(() => {
+        if (budgetCreatePageState.scope.type === 'project'
+        && state.existingProjectIds.includes(budgetCreatePageState.project)) return i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.PROJECT_VALIDATION');
+        return '';
+    }),
+    projectInvalid: computed(() => !state.existingProjectIds.includes(budgetCreatePageState.project) && budgetCreatePageState.project.length > 0),
+});
+
+const emit = defineEmits<{(e: 'click-next'): void, (e: 'click-cancel'): void }>();
+
+
+watch(() => budgetCreatePageState, () => {
+    if (budgetCreatePageState.name && budgetCreatePageState.project && budgetCreatePageState.scope.type === 'project' && budgetCreatePageState.budgetManager) {
+        state.isContinueAble = true;
+    } else if (budgetCreatePageState.name && budgetCreatePageState.project && budgetCreatePageState.scope.type === 'serviceAccount'
+    && budgetCreatePageState.scope.serviceAccount && budgetCreatePageState.scope.serviceAccount.length > 0 && budgetCreatePageState.budgetManager
+    ) {
+        state.isContinueAble = true;
+    } else {
+        state.isContinueAble = false;
+    }
+}, { deep: true, immediate: true });
+
+watch(() => project, () => {
+    state.projectList = Object.values(project.value).map((pj) => ({
+        name: pj.key,
+        label: pj.label,
+    }));
+}, { deep: true, immediate: true });
+
+const handleUpdateName = (value: string) => {
+    budgetCreatePageStore.setName(value);
+};
+
+const handleProjectId = (projectIds: string[]) => {
+    budgetCreatePageStore.setProject(projectIds[0]);
+};
+
+const handleNext = () => {
+    emit('click-next');
+};
+
+const handleCancel = () => {
+    emit('click-cancel');
+};
+
+const getServiceAccountIncludedinProjectInfo = async () => {
+    try {
+        const { results } = await SpaceConnector.clientV2.identity.serviceAccount.list<ServiceAccountListParameters, ListResponse<ServiceAccountModel>>({
+            query: {
+                filter: [
+                    {
+                        k: 'project_id',
+                        v: budgetCreatePageState.project,
+                        o: 'eq',
+                    },
+                    {
+                        k: 'service_account_mgr_id',
+                        v: '',
+                        o: 'not',
+                    },
+                ],
+            },
+        });
+        state.serviceAccountList = results?.filter((result: any) => result.service_account_mgr_id)
+            .map((info:any) => info.service_account_mgr_id) ?? [];
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+const fetchBudget = async () => {
+    try {
+        const { results } = await SpaceConnector.clientV2.costAnalysis.budget.list<BudgetListParameters, ListResponse<BudgetModel>>();
+        state.budgetList = results;
+        state.budgetNames = results?.map((result) => result.name) ?? [];
+        state.existingProjectIds = results?.map((result) => result.project_id) ?? [];
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+watch(() => budgetCreatePageState.project, async () => {
+    await getServiceAccountIncludedinProjectInfo();
+}, { deep: true, immediate: true });
+
+watchEffect(async () => {
+    await fetchBudget();
+});
+
+watch([
+    () => state.budgetList,
+    () => budgetCreatePageState.project,
+    () => budgetCreatePageState.scope.serviceAccount,
+    () => budgetCreatePageState.scope.type,
+], () => {
+    const filteredList = state.budgetList.filter((result) => {
+        if (budgetCreatePageState.scope.type === 'project') {
+            return result.project_id === budgetCreatePageState.project && !result.service_account_id;
+        }
+        return result.project_id === budgetCreatePageState.project
+               && result.service_account_id === budgetCreatePageState.scope.serviceAccount;
+    });
+    budgetCreatePageState.alreadyExistingBudgetYear = filteredList.map((result) => result.budget_year);
+}, { deep: true, immediate: true });
+</script>
+
+<template>
+    <div class="flex flex-col">
+        <div class="contents-container">
+            <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.BASE_INFO.LABEL_NAME')"
+                           required
+            >
+                <p-text-input block
+                              :invalid="budgetCreatePageState.name.length < 0 || state.budgetNames.includes(budgetCreatePageState.name)"
+                              :value="budgetCreatePageState.name"
+                              @update:value="handleUpdateName"
+                />
+            </p-field-group>
+            <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.PROJECT')"
+                           required
+            >
+                <!-- :invalid="!state.projectInvalid"
+                           :invalid-text="state.projectInvalidText" -->
+                <project-select-dropdown
+                    show-delete-all-button
+                    :project-group-selectable="false"
+                    :selected-project-ids="budgetCreatePageState.project ? [budgetCreatePageState.project] : []"
+                    hide-create-button
+                    @update:selected-project-ids="handleProjectId"
+                />
+            </p-field-group>
+            <budget-create-scope-select />
+            <budget-create-manager-select />
+        </div>
+        <div class="mt-8 flex justify-end gap-4">
+            <p-button style-type="transparent"
+                      @click="handleCancel"
+            >
+                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.CANCEL') }}
+            </p-button>
+            <p-button icon-right="ic_arrow-right"
+                      :disabled="!state.isContinueAble"
+                      @click="handleNext"
+            >
+                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.CONTINUE') }}
+            </p-button>
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
new file mode 100644
index 0000000000..82a6d87b6a
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
@@ -0,0 +1,610 @@
+<script setup lang="ts">
+import {
+    computed, reactive, watch,
+} from 'vue';
+
+import dayjs from 'dayjs';
+
+import {
+    PFieldGroup, PSelectDropdown, PDatetimePicker, PButton, PStatus,
+    PDivider, PRadioGroup, PRadio, PPaneLayout, PTextInput, PBadge, PToggleButton,
+} from '@cloudforet/mirinae';
+
+import { i18n } from '@/translations';
+
+import { CURRENCY, CURRENCY_SYMBOL } from '@/store/display/constant';
+import { useDomainStore } from '@/store/domain/domain-store';
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
+import type { ServiceAccountReferenceMap } from '@/store/reference/service-account-reference-store';
+
+import type { UnifiedCostConfig } from '@/services/advanced/types/preferences-type';
+
+import { DEFAULT_UNIFIED_COST_CURRENCY, YAHOO_FINANCE_ID } from '../constants/cost-explorer-constant';
+import { useBudgetCreatePageStore } from '../stores/budget-create-page-store';
+import BudgetLastThreeMonthCostTrendBarChart from './BudgetLastThreeMonthCostTrendBarChart.vue';
+
+const budgetCreatePageStore = useBudgetCreatePageStore();
+const budgetCreatePageState = budgetCreatePageStore.state;
+const domainStore = useDomainStore();
+const domainState = domainStore.state;
+const allReferenceStore = useAllReferenceStore();
+
+const originUnifiedCostConfig = computed<UnifiedCostConfig|undefined>(() => domainState.config?.settings?.unified_cost_config);
+
+const project = computed<ProjectReferenceMap>(() => allReferenceStore.getters.project);
+const serviceAccount = computed<ServiceAccountReferenceMap>(() => allReferenceStore.getters.serviceAccount);
+
+const state = reactive({
+    selectedCurrency: originUnifiedCostConfig.value?.currency ?? DEFAULT_UNIFIED_COST_CURRENCY,
+    exchangeRateSourceOptions: [YAHOO_FINANCE_ID],
+    selectedExchangeRateSource: originUnifiedCostConfig.value?.exchange_source ?? YAHOO_FINANCE_ID,
+    budgetCycleList: [
+        { name: 'TOTAL', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.FIXED_TERM') },
+        { name: 'MONTHLY', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.MONTHLY') },
+    ],
+    selectedBudgetCycle: '',
+    monthlyBudgetAllocationList: [
+        { name: 'applySameAmount', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.APPLY_THE_SAME_AMOUNT') },
+        { name: 'increaseBySpecificPercentage', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.INCRASE_BY_SPECIFIC_PERCENTAGE') },
+        { name: 'enterManually', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.ENTER_MANUALLY') },
+    ],
+    selectedMonthlyBudgetAllocation: '',
+    isContinueAble: false,
+    dateList: Array(12).fill(''),
+    budgetEachDate: Array(12).fill(''),
+    budgetAmount: undefined as number | undefined,
+    budgetAppliedSameAmount: undefined,
+    initialAmount: undefined,
+    monthlyGrowthRate: undefined,
+    analyzedCostData: undefined,
+    startSelectedForBudgetYear: false,
+    endSelectedForBudgetYear: false,
+});
+
+const emit = defineEmits<{(e: 'click-next'): void}>();
+
+watch([() => state, () => budgetCreatePageState], () => {
+    budgetCreatePageStore.setCurrency(state.selectedCurrency);
+    budgetCreatePageStore.setTimeUnit(budgetCreatePageState.time_unit);
+    if (budgetCreatePageState.time_unit === 'TOTAL' && state.budgetAmount) budgetCreatePageStore.setLimit(state.budgetAmount);
+}, { deep: true, immediate: true });
+
+watch(() => [budgetCreatePageState.startMonth, budgetCreatePageState.endMonth], () => {
+    if (budgetCreatePageState.startMonth.length > 0) {
+        const startDate = dayjs.utc(budgetCreatePageState.startMonth[0]);
+        state.dateList = Array.from(
+            { length: 12 },
+            (_, i) => startDate.add(i, 'month').format('MMM YYYY'),
+        );
+        budgetCreatePageState.budgetEachDate = Array(12).fill('');
+    }
+}, { immediate: true });
+
+watch(() => [
+    budgetCreatePageState.selectedMonthlyBudgetAllocation,
+    budgetCreatePageState.budgetAppliedSameAmount,
+    budgetCreatePageState.initialAmount,
+    budgetCreatePageState.monthlyGrowthRate,
+    budgetCreatePageState.budgetEachDate,
+    budgetCreatePageState.startMonth,
+    budgetCreatePageState.endMonth,
+], () => {
+    if (budgetCreatePageState.startMonth.length === 0 || budgetCreatePageState.endMonth.length === 0) {
+        return;
+    }
+
+    const planned_limits: any = [];
+    const startDate = dayjs.utc(budgetCreatePageState.startMonth[0]);
+    const endDate = dayjs.utc(budgetCreatePageState.endMonth[0]);
+    let currentDate = startDate;
+
+    if (budgetCreatePageState.selectedMonthlyBudgetAllocation === 'applySameAmount') {
+        while (currentDate.isSameOrBefore(endDate, 'month') && budgetCreatePageState.budgetAppliedSameAmount
+        && budgetCreatePageState.budgetAppliedSameAmount > 0) {
+            planned_limits.push({
+                date: currentDate.format('YYYY-MM'),
+                limit: budgetCreatePageState.budgetAppliedSameAmount,
+            });
+            currentDate = currentDate.add(1, 'month');
+        }
+    } else if (budgetCreatePageState.selectedMonthlyBudgetAllocation === 'increaseBySpecificPercentage'
+        && budgetCreatePageState.initialAmount && budgetCreatePageState.monthlyGrowthRate
+    ) {
+        let currentAmount = budgetCreatePageState.initialAmount;
+        while (currentDate.isSameOrBefore(endDate, 'month')) {
+            planned_limits.push({
+                date: currentDate.format('YYYY-MM'),
+                limit: Math.round(currentAmount),
+            });
+            currentAmount *= (1 + ((budgetCreatePageState.monthlyGrowthRate || 0) / 100));
+            currentDate = currentDate.add(1, 'month');
+        }
+    } else if (budgetCreatePageState.selectedMonthlyBudgetAllocation === 'enterManually'
+    && budgetCreatePageState.budgetEachDate.length === Number(endDate.month() - startDate.month() + 1)) {
+        const monthIndices = Array.from({ length: 12 }, (_, i) => i);
+        monthIndices.forEach((i) => {
+            if (currentDate.isSameOrBefore(endDate, 'month')) {
+                planned_limits.push({
+                    date: currentDate.format('YYYY-MM'),
+                    limit: Number(budgetCreatePageState.budgetEachDate[i]),
+                });
+                currentDate = currentDate.add(1, 'month');
+            }
+        });
+    }
+
+    if (planned_limits.length > 0) {
+        budgetCreatePageStore.setPlannedLimits(planned_limits);
+    }
+}, { deep: true });
+
+watch(() => [
+    budgetCreatePageState.time_unit,
+    budgetCreatePageState.limit,
+    budgetCreatePageState.planned_limits,
+    budgetCreatePageState.selectedMonthlyBudgetAllocation,
+    budgetCreatePageState.budgetAppliedSameAmount,
+    state.initialAmount,
+    state.monthlyGrowthRate,
+    budgetCreatePageState.budgetEachDate,
+    state.startSelectedForBudgetYear,
+    state.endSelectedForBudgetYear,
+    budgetCreatePageState.startMonth,
+    budgetCreatePageState.endMonth,
+], () => {
+    if (budgetCreatePageState.startMonth.length === 0 || budgetCreatePageState.endMonth.length === 0) {
+        state.isContinueAble = false;
+    }
+
+    if (budgetCreatePageState.time_unit === 'TOTAL' && budgetCreatePageState.limit && budgetCreatePageState.limit > 0) {
+        const isDuplicatedBudgetYear = (
+            budgetCreatePageState.project
+            && budgetCreatePageState.alreadyExistingBudgetYear.length > 0
+            && (
+                (state.startSelectedForBudgetYear && budgetCreatePageState.alreadyExistingBudgetYear.includes(budgetCreatePageState.budgetYear))
+                || (state.endSelectedForBudgetYear && budgetCreatePageState.alreadyExistingBudgetYear.includes(budgetCreatePageState.budgetYear))
+            )
+        );
+
+        if (isDuplicatedBudgetYear) {
+            state.isContinueAble = false;
+            return;
+        }
+
+        state.isContinueAble = true;
+    } else if (budgetCreatePageState.time_unit === 'MONTHLY') {
+        if (budgetCreatePageState.planned_limits && budgetCreatePageState.planned_limits.length > 0) {
+            const isDuplicatedBudgetYear = (
+                budgetCreatePageState.project
+                && budgetCreatePageState.alreadyExistingBudgetYear.length > 0
+                && (
+                    (state.startSelectedForBudgetYear && budgetCreatePageState.alreadyExistingBudgetYear.includes(budgetCreatePageState.budgetYear))
+                    || (state.endSelectedForBudgetYear && budgetCreatePageState.alreadyExistingBudgetYear.includes(budgetCreatePageState.budgetYear))
+                )
+            );
+
+            if (isDuplicatedBudgetYear) {
+                state.isContinueAble = false;
+                return;
+            }
+
+            state.isContinueAble = true;
+        } else {
+            state.isContinueAble = false;
+        }
+    }
+}, { deep: true, immediate: true });
+
+watch(() => budgetCreatePageState.selectedMonthlyBudgetAllocation, (nv, ov) => {
+    if (nv !== ov) {
+        budgetCreatePageStore.setPlannedLimits([]);
+        budgetCreatePageStore.setBudgetAppliedSameAmount(undefined);
+        budgetCreatePageStore.setInitialAmount(undefined);
+        budgetCreatePageStore.setMonthlyGrowthRate(undefined);
+        budgetCreatePageState.budgetEachDate = [];
+    }
+}, { immediate: true });
+
+watch([() => budgetCreatePageState.startMonth, () => budgetCreatePageState.endMonth], () => {
+    if (budgetCreatePageState.startMonth.length > 0 || budgetCreatePageState.endMonth.length > 0) {
+        if (budgetCreatePageState.startMonth.length > 0) {
+            state.startSelectedForBudgetYear = true;
+        } else if (budgetCreatePageState.endMonth.length > 0) {
+            state.endSelectedForBudgetYear = true;
+        }
+    }
+}, { deep: true, immediate: true });
+
+watch([() => state.startSelectedForBudgetYear, () => state.endSelectedForBudgetYear, () => budgetCreatePageState.startMonth, () => budgetCreatePageState.endMonth], () => {
+
+}, { deep: true, immediate: true });
+
+const isDateInRange = (index: number) => {
+    if (budgetCreatePageState.startMonth.length === 0 || budgetCreatePageState.endMonth.length === 0) return false;
+    const startDate = dayjs.utc(budgetCreatePageState.startMonth[0]);
+    const endDate = dayjs.utc(budgetCreatePageState.endMonth[0]);
+    const currentDate = startDate.add(index, 'month');
+    return currentDate.isSameOrBefore(endDate, 'month');
+};
+
+const handleUpdatgeBudgetEachDate = (value: string, index: number) => {
+    if (!isDateInRange(index)) return;
+    const newBudgetEachDate = [...budgetCreatePageState.budgetEachDate];
+    newBudgetEachDate[index] = value;
+    budgetCreatePageState.budgetEachDate = newBudgetEachDate;
+};
+
+const handlePrevious = () => {
+    budgetCreatePageStore.setCurrentStep(1);
+};
+
+const handleUpdateBudgetAmount = (value) => {
+    budgetCreatePageStore.setLimit(value);
+};
+
+const handleUpdateBudgetAppliedSameAmount = (value) => {
+    budgetCreatePageStore.setBudgetAppliedSameAmount(value);
+};
+
+const handleUpdateInitialAmount = (value) => {
+    budgetCreatePageStore.setInitialAmount(value);
+};
+
+const handleUpdateMonthlyGrowthRate = (value) => {
+    budgetCreatePageStore.setMonthlyGrowthRate(value);
+};
+
+const handleUpdateStartSelectForBudgetYear = (value: boolean) => {
+    state.startSelectedForBudgetYear = value;
+    if (value) {
+        state.endSelectedForBudgetYear = false;
+    }
+};
+
+const handleUpdateEndSelectForBudgetYear = (value: boolean) => {
+    state.endSelectedForBudgetYear = value;
+    if (value) {
+        state.startSelectedForBudgetYear = false;
+    }
+};
+
+const isValidPositiveNumber = (value: any): boolean => {
+    const num = Number(value);
+    return value !== '' && !Number.isNaN(num) && num > 0;
+};
+watch([
+    () => budgetCreatePageState.startMonth,
+    () => budgetCreatePageState.endMonth,
+    () => state.startSelectedForBudgetYear,
+    () => state.endSelectedForBudgetYear,
+], () => {
+    if (budgetCreatePageState.startMonth.length > 0 && budgetCreatePageState.endMonth.length > 0) {
+        const startYear = dayjs.utc(budgetCreatePageState.startMonth[0]).year().toString();
+        const endYear = dayjs.utc(budgetCreatePageState.endMonth[0]).year().toString();
+
+        if (startYear === endYear) {
+            budgetCreatePageStore.setBudgetYear(startYear);
+        } else if (state.startSelectedForBudgetYear) {
+            budgetCreatePageStore.setBudgetYear(startYear);
+        } else if (state.endSelectedForBudgetYear) {
+            budgetCreatePageStore.setBudgetYear(endYear);
+        }
+    }
+}, { immediate: true });
+
+</script>
+
+<template>
+    <div class="flex flex-col">
+        <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.CURRENCY')"
+                       required
+                       icon-right="ic_info-circle"
+        >
+            <p-select-dropdown :menu="Object.values(CURRENCY).map(currency => ({ label: `${CURRENCY_SYMBOL[currency]} ${currency}`, name: currency }))"
+                               :selected.sync="state.selectedCurrency"
+                               use-fixed-menu-style
+            >
+                <template #menu-item--format="{item}">
+                    <div v-if="item.name === originUnifiedCostConfig?.currency">
+                        <span>{{ item.label }}</span>
+                        <p-badge badge-type="subtle"
+                                 style-type="indigo100"
+                                 class="ml-1"
+                        >
+                            {{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.DEFAULT') }}
+                        </p-badge>
+                    </div>
+                </template>
+            </p-select-dropdown>
+        </p-field-group>
+        <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.EXCHANGE_RATE_SOURCE')"
+                       required
+        >
+            <p-radio-group direction="vertical">
+                <p-radio v-for="source in state.exchangeRateSourceOptions"
+                         :key="source"
+                         v-model="state.selectedExchangeRateSource"
+                         :value="source"
+                >
+                    {{ source }}
+                </p-radio>
+            </p-radio-group>
+        </p-field-group>
+        <div class="bottom-section">
+            <div class="left-section">
+                <p-divider />
+                <div class="flex gap-6 mt-6">
+                    <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.START_MONTH')"
+                                   required
+                    >
+                        <p-datetime-picker data-type="yearToMonth"
+                                           :selected-dates.sync="budgetCreatePageState.startMonth"
+                                           :min-date="budgetCreatePageState.endMonth.length > 0 ? dayjs.utc(budgetCreatePageState.endMonth[0]).subtract(11, 'month').format('YYYY-MM') : ''"
+                                           :max-date="budgetCreatePageState.endMonth.length > 0 ? dayjs.utc(budgetCreatePageState.endMonth[0]).format('YYYY-MM'): ''"
+                                           :placeholder="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SELECT_MONTH')"
+                        />
+                    </p-field-group>
+                    <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.END_MONTH')"
+                                   required
+                    >
+                        <p-datetime-picker data-type="yearToMonth"
+                                           :selected-dates.sync="budgetCreatePageState.endMonth"
+                                           :placeholder="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SELECT_MONTH')"
+                                           :min-date="budgetCreatePageState.startMonth.length > 0
+                                               ? dayjs.utc(budgetCreatePageState.startMonth[0]).add(1, 'month').format('YYYY-MM') : ''"
+                                           :max-date="budgetCreatePageState.startMonth.length > 0 ? dayjs.utc(budgetCreatePageState.startMonth[0]).add(11, 'month').format('YYYY-MM') : ''"
+                        />
+                    </p-field-group>
+                </div>
+                <div class="flex gap-15 mb-6">
+                    <div class="flex gap-1">
+                        <p-toggle-button
+                            :value="state.startSelectedForBudgetYear"
+                            @update:value="handleUpdateStartSelectForBudgetYear"
+                        />
+                        <span class="text-sm font-normal"
+                              :class="{'start-selected': state.startSelectedForBudgetYear, 'end-selected': !state.startSelectedForBudgetYear}"
+                        >{{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BASE_FOR_PERIOD_FILTER') }}</span>
+                    </div>
+                    <div class="flex gap-1">
+                        <p-toggle-button
+                            :value="state.endSelectedForBudgetYear"
+                            @update:value="handleUpdateEndSelectForBudgetYear"
+                        />
+                        <span class="text-sm font-normal"
+                              :class="{'start-selected': state.endSelectedForBudgetYear, 'end-selected': !state.endSelectedForBudgetYear}"
+                        >{{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BASE_FOR_PERIOD_FILTER') }}</span>
+                    </div>
+                </div>
+                <p-status v-if="budgetCreatePageState.project
+                              && budgetCreatePageState.alreadyExistingBudgetYear.length > 0
+                              && (
+                                  (state.startSelectedForBudgetYear && budgetCreatePageState.alreadyExistingBudgetYear.includes(budgetCreatePageState.budgetYear))
+                                  ||
+                                  (state.endSelectedForBudgetYear && budgetCreatePageState.alreadyExistingBudgetYear.includes(budgetCreatePageState.budgetYear))
+                              )"
+                          icon="ic_warning-filled"
+                          :text="budgetCreatePageState.scope.type === 'project'
+                              ? $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.PROJECT_DUPLICATED_WARNING1', {
+                                  project: project[budgetCreatePageState.project].name,
+                                  year_list: budgetCreatePageState.alreadyExistingBudgetYear.join(',').split(' ')
+                              }) : $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.PROJECT_DUPLICATED_WARNING2', {
+                                  project: project[budgetCreatePageState.project].name,
+                                  serviceAccount: serviceAccount[budgetCreatePageState.scope.serviceAccount ?? ''].name,
+                                  year_list: budgetCreatePageState.alreadyExistingBudgetYear.join(',')
+                              })"
+                          theme="red"
+                          class="text-sm mb-6"
+                />
+                <div class="flex">
+                    <p-field-group
+                        :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BUDGET_CYCLE')"
+                        :help-text="budgetCreatePageState.startMonth.length === 0 || budgetCreatePageState.endMonth.length === 0
+                            ? $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BUDGET_CYCLE_DESCRIPTION') : ''"
+                        required
+                    >
+                        <p-radio-group>
+                            <p-radio v-for="(cycle, idx) in state.budgetCycleList"
+                                     :key="`budget-cycle-${idx}`"
+                                     v-model="budgetCreatePageState.time_unit"
+                                     :value="cycle.name"
+                                     :disabled="(budgetCreatePageState.startMonth.length === 0 || budgetCreatePageState.endMonth.length === 0 || budgetCreatePageState.project
+                                         && budgetCreatePageState.alreadyExistingBudgetYear.length > 0
+                                         && (
+                                             (state.startSelectedForBudgetYear && budgetCreatePageState.alreadyExistingBudgetYear.includes(budgetCreatePageState.budgetYear))
+                                             ||
+                                             (state.endSelectedForBudgetYear && budgetCreatePageState.alreadyExistingBudgetYear.includes(budgetCreatePageState.budgetYear))
+                                         ))"
+                            >
+                                <span>{{ cycle.label }}</span>
+                            </p-radio>
+                        </p-radio-group>
+                    </p-field-group>
+                </div>
+                <p-pane-layout v-if="budgetCreatePageState.time_unit.length > 0"
+                               class="cycle-info-layout"
+                               :class="{'fixed-term-layout': budgetCreatePageState.time_unit === 'TOTAL'}"
+                >
+                    <div v-if="budgetCreatePageState.time_unit === 'TOTAL'"
+                         class="pt-4 pl-4"
+                    >
+                        <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BUDGET_AMOUNT')"
+                                       required
+                        >
+                            <p-text-input :value="budgetCreatePageState.limit"
+                                          :invalid="!isValidPositiveNumber(budgetCreatePageState.limit)"
+                                          @update:value="handleUpdateBudgetAmount"
+                            >
+                                <template #input-right>
+                                    ({{ CURRENCY_SYMBOL[state.selectedCurrency] }})
+                                </template>
+                            </p-text-input>
+                        </p-field-group>
+                    </div>
+                    <div v-else-if="budgetCreatePageState.time_unit === 'MONTHLY'"
+                         class="ml-2"
+                    >
+                        <div class="allocation-layout">
+                            <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.MONTHLY_BUDGET_ALLOCATION')"
+                                           required
+                                           class="pt-4"
+                                           :disabled="budgetCreatePageState.startMonth.length === 0 || budgetCreatePageState.endMonth.length === 0"
+                            >
+                                <p-radio-group direction="vertical"
+                                               class="flex flex-col"
+                                >
+                                    <p-radio v-for="(allocation, idx) in state.monthlyBudgetAllocationList"
+                                             :key="`budget-allocation-${idx}`"
+                                             v-model="budgetCreatePageState.selectedMonthlyBudgetAllocation"
+                                             :value="allocation.name"
+                                             :disabled="budgetCreatePageState.startMonth.length === 0 || budgetCreatePageState.endMonth.length === 0"
+                                    >
+                                        <span>{{ allocation.label }}</span>
+                                    </p-radio>
+                                </p-radio-group>
+                            </p-field-group>
+                            <p-pane-layout v-if="budgetCreatePageState.selectedMonthlyBudgetAllocation"
+                                           class="monthly-text-layout"
+                            >
+                                <p-field-group v-if="budgetCreatePageState.selectedMonthlyBudgetAllocation === 'applySameAmount'"
+                                               :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.AMOUNT_EACH_MONTH')"
+                                               required
+                                >
+                                    <p-text-input :value="budgetCreatePageState.budgetAppliedSameAmount"
+                                                  :invalid="!isValidPositiveNumber(budgetCreatePageState.budgetAppliedSameAmount)"
+                                                  @update:value="handleUpdateBudgetAppliedSameAmount"
+                                    >
+                                        <template #input-right>
+                                            ({{ CURRENCY_SYMBOL[state.selectedCurrency] }})
+                                        </template>
+                                    </p-text-input>
+                                </p-field-group>
+                                <div v-else-if="budgetCreatePageState.selectedMonthlyBudgetAllocation === 'increaseBySpecificPercentage'"
+                                     class="increase-layout"
+                                >
+                                    <span class="text-md font-bold mb-1">Specific % Each Month</span>
+                                    <div class="flex gap-6 mt-1">
+                                        <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.INITIAL_AMOUNT')"
+                                                       style-type="secondary"
+                                                       required
+                                        >
+                                            <p-text-input :value="budgetCreatePageState.initialAmount"
+                                                          :invalid="!isValidPositiveNumber(budgetCreatePageState.initialAmount)"
+                                                          @update:value="handleUpdateInitialAmount"
+                                            >
+                                                <template #input-right>
+                                                    ({{ CURRENCY_SYMBOL[state.selectedCurrency] }})
+                                                </template>
+                                            </p-text-input>
+                                        </p-field-group>
+                                        <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.MONTHLY_GROWTH_RATE')"
+                                                       style-type="secondary"
+                                                       required
+                                        >
+                                            <p-text-input :value="budgetCreatePageState.monthlyGrowthRate"
+                                                          :invalid="!isValidPositiveNumber(budgetCreatePageState.monthlyGrowthRate)"
+                                                          @update:value="handleUpdateMonthlyGrowthRate"
+                                            >
+                                                <template #input-right>
+                                                    %
+                                                </template>
+                                            </p-text-input>
+                                        </p-field-group>
+                                    </div>
+                                </div>
+                                <div v-else-if="budgetCreatePageState.selectedMonthlyBudgetAllocation === 'enterManually'">
+                                    <span class="text-xs mb-2">Enter each month manually.</span>
+                                    <div class="allocation-enter-manually">
+                                        <p-field-group v-for="(date, idx) in state.dateList"
+                                                       :key="`budget-date-${idx}`"
+                                                       :label="date"
+                                                       required
+                                        >
+                                            <p-text-input :value="state.budgetEachDate[idx]"
+                                                          :disabled="!isDateInRange(idx)"
+                                                          :invalid="isDateInRange(idx) && (!state.budgetEachDate[idx] || !isValidPositiveNumber(Number(state.budgetEachDate[idx])))"
+                                                          @update:value="(value) => handleUpdatgeBudgetEachDate(value, idx)"
+                                            >
+                                                <template #input-right>
+                                                    ({{ CURRENCY_SYMBOL[state.selectedCurrency] }})
+                                                </template>
+                                            </p-text-input>
+                                        </p-field-group>
+                                    </div>
+                                </div>
+                            </p-pane-layout>
+                        </div>
+                    </div>
+                </p-pane-layout>
+            </div>
+            <div class="right-section">
+                <budget-last-three-month-cost-trend-bar-chart />
+            </div>
+        </div>
+        <div class="mt-8 flex justify-end gap-4">
+            <p-button style-type="transparent"
+                      @click="handlePrevious"
+            >
+                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.PREVIOUS') }}
+            </p-button>
+            <p-button :disabled="!state.isContinueAble"
+                      @click="emit('click-next')"
+            >
+                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.CREATE') }}
+            </p-button>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+/* custom design-system component - p-select-dropdown */
+:deep(.p-select-dropdown) {
+    width: 15rem;
+}
+
+.cycle-info-layout {
+    margin-left: 1.5rem;
+    padding-bottom: 1rem;
+    &.fixed-term-layout {
+        max-height: 5.375rem;
+    }
+    .allocation-layout {
+        min-width: 500px;
+        .monthly-text-layout {
+            @apply pt-4 pl-4 bg-gray-100;
+            margin-left: 24px;
+            width: 25.5rem;
+            .increase-layout {
+                .p-text-input {
+                    width: 11rem;
+                }
+            }
+        }
+    }
+}
+
+.allocation-enter-manually {
+    @apply grid grid-cols-4 grid-rows-3 mt-1;
+    .p-text-input {
+        width: 82px;
+    }
+}
+
+.bottom-section {
+    @apply flex gap-8;
+    .left-section {
+        width: 30.5rem;
+        .start-selected {
+            @apply text-gray-900;
+        }
+        .end-selected {
+            @apply text-gray-300;
+        }
+    }
+    .right-section {
+        margin-left: 3rem;
+    }
+}
+</style>
+
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue
new file mode 100644
index 0000000000..22c2901532
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRouter } from 'vue-router/composables';
+
+
+import dayjs from 'dayjs';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import {
+    PFieldGroup, PTextInput, PButton, PIconButton,
+} from '@cloudforet/mirinae';
+
+import type { BudgetCreateParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/create';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
+import { i18n } from '@/translations';
+
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
+
+import { COST_EXPLORER_ROUTE } from '../routes/route-constant';
+import { useBudgetCreatePageStore } from '../stores/budget-create-page-store';
+
+
+const budgetCreatePageStore = useBudgetCreatePageStore();
+const budgetCreatePageState = budgetCreatePageStore.state;
+const userReferenceStore = useUserReferenceStore();
+
+const router = useRouter();
+
+const invalidThreshold = ref<boolean>(false);
+
+const isAlertRecipientsSelected = ref<boolean>(false);
+
+watch(() => budgetCreatePageState.thresholds, () => {
+    const filteredThresholdInvalidState = budgetCreatePageState.thresholds.filter((threshold) => {
+        if (threshold.value) {
+            if (Number(threshold.value) > 0 && Number(threshold.value) < 101) {
+                return false;
+            } if (Number(threshold.value) <= 0 || typeof threshold.value !== 'number') {
+                return true;
+            }
+            return true;
+        }
+        return true;
+    });
+
+    if (filteredThresholdInvalidState.length === 0) {
+        invalidThreshold.value = true;
+    } else {
+        invalidThreshold.value = false;
+    }
+}, { deep: true, immediate: true });
+
+watch(() => budgetCreatePageState.recipients.users, () => {
+    if (budgetCreatePageState.recipients.users.length > 0) {
+        isAlertRecipientsSelected.value = true;
+    } else {
+        isAlertRecipientsSelected.value = false;
+    }
+}, { immediate: true });
+
+const addThreshold = () => {
+    budgetCreatePageStore.setThresholds({ value: 0 });
+};
+
+const handleUpdateThreshold = (value: number, index: number) => {
+    budgetCreatePageState.thresholds[index].value = value;
+};
+
+const handleRemoveThreshold = () => {
+    const index = budgetCreatePageState.thresholds.length - 1;
+    if (index >= 0) {
+        budgetCreatePageState.thresholds.splice(index, 1);
+    }
+};
+
+const handleSelectIds = (selectedIds: string[]) => {
+    if (selectedIds.length > 0) budgetCreatePageStore.setRecipients(selectedIds);
+};
+
+const handleFormatRecipients = (value: Record<string, any>) => {
+    if (Array.isArray(value.USER) && value.USER.length === 0) {
+        budgetCreatePageStore.setRecipients([]);
+    }
+};
+
+const createBudget = async (type: 'skip' | 'set') => {
+    if (budgetCreatePageState.loading) return;
+
+    try {
+        budgetCreatePageState.loading = true;
+        const params: BudgetCreateParameters = {
+            name: budgetCreatePageState.name,
+            limit: budgetCreatePageState.limit,
+            planned_limits: budgetCreatePageState.planned_limits,
+            currency: budgetCreatePageState.currency ?? 'USD',
+            time_unit: budgetCreatePageState.time_unit === 'TOTAL' ? 'TOTAL' : 'MONTHLY',
+            start: dayjs.utc(budgetCreatePageState.startMonth[0]).format('YYYY-MM'),
+            end: dayjs.utc(budgetCreatePageState.endMonth[0]).format('YYYY-MM'),
+            budget_year: budgetCreatePageState.budgetYear,
+            notification: type === 'set' ? {
+                state: budgetCreatePageState.thresholds.filter((threshold) => threshold.value && threshold.value > 0).length > 0
+                    ? 'ENABLED' : 'DISABLED',
+                plans: budgetCreatePageState.thresholds.length > 0 ? budgetCreatePageState.thresholds.map((threshold) => ({
+                    unit: 'PERCENT',
+                    threshold: threshold.value === 0 ? 0 : Number(threshold.value),
+                })) : [],
+                recipients: {
+                    users: budgetCreatePageState.recipients.users,
+                },
+            } : {
+                state: 'DISABLED',
+            },
+            tags: {},
+            resource_group: 'PROJECT',
+            project_id: budgetCreatePageState.project,
+            service_account_id: budgetCreatePageState.scope.serviceAccount,
+            budget_manager_id: budgetCreatePageState.budgetManager,
+        };
+        await SpaceConnector.clientV2.costAnalysis.budget.create<BudgetCreateParameters, BudgetModel>(params);
+
+        budgetCreatePageState.loading = false;
+        router.push({
+            name: COST_EXPLORER_ROUTE.BUDGET._NAME,
+        });
+        showSuccessMessage('', i18n.t('BILLING.COST_MANAGEMENT.BUDGET.ALT_S_CREATE_BUDGET'));
+    } catch (error: any) {
+        ErrorHandler.handleError(error, true);
+        showErrorMessage(error?.code ?? '', i18n.t('BILLING.COST_MANAGEMENT.BUDGET.ALT_E_CREATE_BUDGET'));
+    } finally {
+        budgetCreatePageStore.reset();
+    }
+};
+</script>
+
+<template>
+    <div>
+        <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SET_ALERT_THRESHOLD')"
+                       :help-text="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.EXCEEDS_AMOUNT_DESCRIPTION')"
+                       required
+                       :invalid-text="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.THRESHOLD_INVALID_TEXT')"
+                       :invalid="!invalidThreshold"
+        >
+            <div class="flex flex-col gap-2">
+                <div v-for="(threshold, idx) in budgetCreatePageState.thresholds"
+                     :key="idx"
+                     class="flex items-center gap-2"
+                >
+                    <p-text-input
+                        :value="threshold.value"
+                        :invalid="!invalidThreshold"
+                        @update:value="(value) => handleUpdateThreshold(value, idx)"
+                    >
+                        <template #input-right>
+                            %
+                        </template>
+                    </p-text-input>
+                    <span>of budget</span>
+                    <p-icon-button v-if="idx > 0"
+                                   name="ic_delete"
+                                   style-type="tertiary"
+                                   shape="square"
+                                   width="1.5rem"
+                                   height="1.5rem"
+                                   @click="handleRemoveThreshold"
+                    />
+                </div>
+            </div>
+        </p-field-group>
+        <p-button class="secondary"
+                  icon-left="ic_plus"
+                  @click="addThreshold"
+        >
+            {{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.ADD_THRESHOLD') }}
+        </p-button>
+        <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.ALERT_RECIPIENTS')"
+                       :help-text="`${$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.ADD_RECIPIENTS_TEXT')} ${budgetCreatePageState.budgetManager}
+                            ${userReferenceStore.getters.userItems[budgetCreatePageState.budgetManager]?.name
+                       ? `(${userReferenceStore.getters.userItems[budgetCreatePageState.budgetManager].name})` : ''}`"
+                       class="mt-8 flex flex-col gap-1"
+                       required
+        >
+            <span class="font-normal text-sm">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.ADDITIONAL_RECIPIENTS') }}</span>
+            <user-select-dropdown show-user-list
+                                  :show-user-group-list="false"
+                                  selection-type="multiple"
+                                  :selected-ids="budgetCreatePageState.recipients.users"
+                                  :excluded-selected-ids="[budgetCreatePageState.budgetManager]"
+                                  @update:selected-ids="handleSelectIds"
+                                  @formatted-selected-ids="handleFormatRecipients"
+            />
+        </p-field-group>
+        <div class="mt-8 flex justify-end gap-4">
+            <p-button style-type="tertiary"
+                      :loading="budgetCreatePageState.loading"
+                      @click="createBudget('skip')"
+            >
+                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SKIP_FOR_LATER') }}
+            </p-button>
+            <p-button class="substitutive"
+                      :disabled="!invalidThreshold || !isAlertRecipientsSelected"
+                      :loading="budgetCreatePageState.loading"
+                      @click="createBudget('set')"
+            >
+                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SET') }}
+            </p-button>
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDeleteCheckModal.vue b/apps/web/src/services/cost-explorer/components/BudgetDeleteCheckModal.vue
new file mode 100644
index 0000000000..2099604337
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetDeleteCheckModal.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { PButtonModal } from '@cloudforet/mirinae';
+
+import type { BudgetDeleteParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/delete';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
+import { i18n } from '@/translations';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+interface Props {
+    visible: boolean;
+    selectedIndices: string[]|undefined;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    visible: true,
+    selectedIndices: undefined,
+});
+
+const emit = defineEmits<{(e: 'update:visible', visible: boolean): void, (e: 'confirm'): void
+}>();
+
+const loading = ref<boolean>(false);
+
+const handleClose = () => {
+    emit('update:visible', false);
+};
+
+const handleConfirm = async () => {
+    if (props.selectedIndices && props.selectedIndices?.length > 0) {
+        await deleteBudgets(props.selectedIndices);
+        emit('confirm');
+        emit('update:visible', false);
+    }
+};
+
+const deleteBudgets = async (budgetIds: string[]) => {
+    try {
+        loading.value = true;
+        await Promise.all(budgetIds.map(async (budgetId) => {
+            await SpaceConnector.clientV2.costAnalysis.budget.delete<BudgetDeleteParameters, BudgetModel>({
+                budget_id: budgetId,
+            });
+        }));
+        showSuccessMessage('', i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.DELETE_SUCCESS'));
+    } catch (error: any) {
+        ErrorHandler.handleError(error);
+        showErrorMessage(error.code, error.message);
+    } finally {
+        loading.value = false;
+    }
+};
+</script>
+
+<template>
+    <p-button-modal :visible="props.visible"
+                    size="sm"
+                    theme-color="alert"
+                    hide-body
+                    :header-title="$t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_DELETE_DESC')"
+                    :loading="loading"
+                    @confirm="handleConfirm"
+                    @close="handleClose"
+                    @cancel="handleClose"
+    />
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailBaseInformation.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailBaseInformation.vue
new file mode 100644
index 0000000000..c9914caecc
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailBaseInformation.vue
@@ -0,0 +1,480 @@
+<script setup lang="ts">
+import { computed, reactive, watchEffect } from 'vue';
+
+import dayjs from 'dayjs';
+
+import {
+    PCard, PDefinitionTable, PToggleButton, PLink, PButton, PPaneLayout, PTextInput,
+} from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
+
+import { i18n } from '@/translations';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { CURRENCY_SYMBOL } from '@/store/display/constant';
+import { useServiceAccountReferenceStore } from '@/store/reference/service-account-reference-store';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
+import ProjectLinkButton from '@/common/modules/project/ProjectLinkButton.vue';
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
+
+import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
+
+import { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+import BudgetAlertsModal from './BudgetAlertsModal.vue';
+
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetPageStore.$state;
+const serviceAccountReferenceStore = useServiceAccountReferenceStore();
+const appContextStore = useAppContextStore();
+
+const getServiceAccountName = (serviceAccountId: string): string|undefined => serviceAccountReferenceStore.getters.serviceAccountItems[serviceAccountId]?.label;
+
+const { hasReadWriteAccess } = usePageEditableStatus();
+
+const storeState = reactive({
+    budgetData: computed(() => budgetPageState.budgetData),
+    isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
+});
+
+const state = reactive({
+    definitionFields: [
+        { name: 'cycle', label: 'Budget Cycle' },
+        { name: 'totalPeriod', label: 'Total Period' },
+        { name: 'budgetScope', label: 'Budget Scope' },
+        { name: 'budgetPlan', label: 'Budget Plan' },
+        { name: 'budgetManager', label: 'Budget Manager' },
+        { name: 'budgetAlerts', label: 'Budget Alerts' },
+        { name: 'alertRecipients', label: 'Alert Recipients' },
+    ],
+    definitionData: computed(() => ({
+        cycle: storeState.budgetData?.time_unit === 'MONTHLY' ? i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.MONTHLY') : i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.FIXED_TERM'),
+        totalPeriod: `${storeState.budgetData?.start} ~ ${storeState.budgetData?.end}`,
+        budgetScope: storeState.budgetData?.service_account_id ?? storeState.budgetData?.project_id,
+        budgetPlan: storeState.budgetData?.time_unit === 'MONTHLY' ? storeState.budgetData.planned_limits : storeState.budgetData?.limit,
+        budgetManager: storeState.budgetData?.budget_manager_id,
+        budgetAlerts: storeState.budgetData?.notification.plans
+            && storeState.budgetData?.notification.plans?.length > 0 ? storeState.budgetData?.notification : {
+                state: 'DISABLED',
+                plans: [],
+            },
+        alertRecipients: storeState.budgetData?.notification.recipients?.users,
+    })),
+    isBudgetAlertsEnabled: computed(() => (storeState.budgetData?.notification.state === 'ENABLED')),
+    updateBudgetAlertsModalVisible: false,
+    budgetAlertEdit: false,
+    budgetEdit: false,
+    budgetManagerEdit: false,
+    alertRecipientsEdit: false,
+    editableTotalBudgetPlan: '',
+    editableBudgetPlan: {},
+    selectedBudgetManager: '',
+    selectedThresholds: [] as MenuItem[],
+    selectedAlertRecipients: [] as string[],
+});
+
+const handleUpdateBudgetAlerts = async (value: boolean) => {
+    state.updateBudgetAlertsModalVisible = value;
+    await budgetPageStore.getBudgetData(budgetPageState.budgetData?.budget_id ?? '');
+};
+
+const updateBudget = async (updateParams: any) => {
+    if (storeState.budgetData?.budget_id) {
+        await budgetPageStore.updateBudgetData({
+            budgetId: storeState.budgetData?.budget_id,
+            updateParams,
+        });
+    }
+};
+
+const updateBudgetInfo = async (type: string, data: any) => {
+    try {
+        await updateBudget({
+            ...data,
+        });
+        showSuccessMessage('', i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.UPDATE_SUCCESS', {
+            data: type.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase()),
+        }));
+    } catch (error: any) {
+        ErrorHandler.handleError(error, true);
+        showErrorMessage(error?.code, error?.message);
+    } finally {
+        if (type === 'budgetManager') {
+            state.budgetManagerEdit = false;
+        } else if (type === 'budgetPlan') {
+            state.budgetEdit = false;
+        }
+    }
+};
+
+const handleSelectBudgetManager = (userId: string|undefined) => {
+    if (userId) state.selectedBudgetManager = userId;
+};
+
+const handleSelectAlertRecipients = (userIds: string[]) => {
+    state.selectedAlertRecipients = userIds;
+};
+
+const handleUpdateBudgetManager = () => {
+    updateBudgetInfo('budgetManager', { budget_manager_id: state.selectedBudgetManager });
+};
+
+const handleselectedBudgetThresholds = (value) => {
+    state.selectedThresholds = value.map((v) => Number(v.label));
+};
+
+const handleUpdateAlertRecipients = async () => {
+    try {
+        await budgetPageStore.updateBudgetNotifications({
+            budget_id: storeState.budgetData?.budget_id ?? '',
+            notification: {
+                ...storeState.budgetData?.notification,
+                recipients: {
+                    users: state.selectedAlertRecipients,
+                },
+            },
+        });
+        state.alertRecipientsEdit = false;
+        showSuccessMessage('', i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.UPDATE_SUCCESS', {
+            data: 'alertRecipients'.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase()),
+        }));
+    } catch (error: any) {
+        ErrorHandler.handleError(error, true);
+    }
+};
+
+const handleUpdateBudgetThresholds = async () => {
+    try {
+        await budgetPageStore.updateBudgetNotifications({
+            budget_id: storeState.budgetData?.budget_id ?? '',
+            notification: {
+                ...storeState.budgetData?.notification,
+                plans: state.selectedThresholds.map((threshold) => ({
+                    unit: 'PERCENT',
+                    threshold: Number(threshold),
+                })),
+            },
+        });
+        state.budgetAlertEdit = false;
+        showSuccessMessage('', i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.UPDATE_SUCCESS', {
+            data: 'budgetThresholds'.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase()),
+        }));
+    } catch (error: any) {
+        ErrorHandler.handleError(error, true);
+        showErrorMessage(error.code, error.message);
+    }
+};
+
+watchEffect(() => {
+    if (storeState.budgetData?.planned_limits && storeState.budgetData.time_unit === 'MONTHLY') {
+        const map: Record<string, number> = {};
+        storeState.budgetData.planned_limits.forEach((item: { date: string; limit: number }) => {
+            map[item.date] = item.limit;
+        });
+        state.editableBudgetPlan = map;
+    }
+});
+</script>
+
+<template>
+    <div>
+        <p-card size="lg"
+                style-type="white"
+                :header="$t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.TITLE')"
+        >
+            <p-definition-table class="mb-10"
+                                :fields="state.definitionFields"
+                                :data="state.definitionData"
+                                block
+                                disable-copy
+                                custom-key-width="160px"
+                                style-type="white"
+            >
+                <template #data-budgetPlan="{ data }">
+                    <div class="flex justify-between">
+                        <p-pane-layout v-if="budgetPageState.budgetData?.time_unit === 'MONTHLY'"
+                                       class="grid grid-cols-4 gap-6 px-4 py-3 min-w-[62rem]"
+                        >
+                            <div v-for="(dateInfo, idx) in data"
+                                 :key="`date-info-${idx}`"
+                                 :class="{overflow: data.length > 12}"
+                            >
+                                <p class="flex flex-col gap-2">
+                                    <span class="font-bold text-xs text-gray-600">
+                                        {{ dayjs.utc(dateInfo.date).format('MMM YYYY') }}
+                                    </span>
+                                    <span v-if="!state.budgetEdit">
+                                        {{ CURRENCY_SYMBOL[budgetPageState.budgetData?.currency ?? ''] }}
+                                        {{ dateInfo.limit.toLocaleString() }}
+                                    </span>
+                                    <p-text-input v-else
+                                                  v-model="state.editableBudgetPlan[dateInfo.date]"
+                                                  class="budget-plan-monthly"
+                                                  :placeholder="dateInfo.limit"
+                                                  :disabled="dayjs.utc(dateInfo.date).isBefore(dayjs.utc().startOf('month'))"
+                                    >
+                                        <template #input-right>
+                                            {{ CURRENCY_SYMBOL[budgetPageState.budgetData?.currency ?? ''] }}
+                                        </template>
+                                    </p-text-input>
+                                </p>
+                            </div>
+                        </p-pane-layout>
+                        <div v-else-if="budgetPageState.budgetData?.time_unit === 'TOTAL'">
+                            <p v-if="!state.budgetEdit">
+                                {{ CURRENCY_SYMBOL[budgetPageState.budgetData?.currency ?? ''] }}
+                                {{ data.toLocaleString() }}
+                            </p>
+                            <p-text-input v-else
+                                          v-model="state.editableTotalBudgetPlan"
+                                          :placeholder="data"
+                            />
+                        </div>
+                        <p-button v-if="!state.budgetEdit && !storeState.isAdminMode && hasReadWriteAccess"
+                                  class="tertiary"
+                                  size="sm"
+                                  @click="state.budgetEdit = true"
+                        >
+                            {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.EDIT') }}
+                        </p-button>
+                        <div v-if="state.budgetEdit"
+                             class="flex gap-2"
+                        >
+                            <p-button size="sm"
+                                      style-type="transparent"
+                                      @click="state.budgetEdit = false"
+                            >
+                                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.CANCEL') }}
+                            </p-button>
+                            <p-button
+                                size="sm"
+                                @click="() => {
+                                    if (Object.keys(state.editableBudgetPlan).length > 0) {
+                                        const newPlannedLimits = Object.entries(state.editableBudgetPlan)
+                                            .filter(([, limit]) => limit !== '' && limit !== null && limit !== undefined)
+                                            .map(([date, limit]) => ({ date, limit }));
+                                        updateBudgetInfo('budgetPlan', { planned_limits: newPlannedLimits })
+                                    } else if (state.editableTotalBudgetPlan) {
+                                        const limit = state.editableTotalBudgetPlan;
+                                        updateBudgetInfo('budgetPlan', { limit })
+                                    }
+                                }"
+                            >
+                                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.SAVE_CHANGES') }}
+                            </p-button>
+                        </div>
+                    </div>
+                </template>
+                <template #data-budgetScope="{ data }">
+                    <div>
+                        <div v-if="data.startsWith('project-')">
+                            <project-link-button :project-id="data"
+                                                 highlight
+                            />
+                        </div>
+                        <div v-else-if="data.startsWith('sa-')">
+                            <p-link
+                                :text="getServiceAccountName(data)"
+                                action-icon="external-link"
+                                new-tab
+                                :to="{
+                                    name: SERVICE_ACCOUNT_ROUTE.DETAIL._NAME,
+                                    params: {
+                                        serviceAccountId: budgetPageState.budgetData?.service_account_id ?? ''
+                                    }
+                                }"
+                                highlight
+                            />
+                        </div>
+                    </div>
+                </template>
+                <template #data-budgetManager="{ data }">
+                    <div
+                        :class="{isDisplayed: !state.budgetManagerEdit ,isEditing: state.budgetManagerEdit}"
+                    >
+                        <span v-if="!state.budgetManagerEdit">{{ data }}</span>
+                        <user-select-dropdown
+                            v-else
+                            show-user-list
+                            :selected-id="data"
+                            :page-size="3"
+                            @update:selected-id="handleSelectBudgetManager"
+                        />
+                        <p-button v-if="!state.budgetManagerEdit && !storeState.isAdminMode && hasReadWriteAccess"
+                                  class="tertiary"
+                                  size="sm"
+                                  @click="state.budgetManagerEdit = true"
+                        >
+                            {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.EDIT') }}
+                        </p-button>
+                        <div v-else-if="state.budgetManagerEdit && !storeState.isAdminMode && hasReadWriteAccess"
+                             class="flex gap-2"
+                        >
+                            <p-button size="sm"
+                                      style-type="transparent"
+                                      @click="state.budgetManagerEdit = false"
+                            >
+                                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.CANCEL') }}
+                            </p-button>
+                            <p-button
+                                size="sm"
+                                @click="handleUpdateBudgetManager"
+                            >
+                                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.SAVE_CHANGES') }}
+                            </p-button>
+                        </div>
+                    </div>
+                </template>
+                <template #data-budgetAlerts="{ data }">
+                    <div
+                        class="flex justify-between"
+                    >
+                        <div class="flex items-start gap-2">
+                            <p-toggle-button :value.sync="state.isBudgetAlertsEnabled"
+                                             show-state-text
+                                             position="left"
+                                             @change-toggle="() => {
+                                                 state.updateBudgetAlertsModalVisible = true;
+                                             }"
+                            />
+                            <div class="flex gap-2 items-start">
+                                <span>{{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.BUDGET_ALERTS_TEXT') }}:</span>
+                                <p v-if="!state.budgetAlertEdit">
+                                    <span v-for="(plan, index) in [...data.plans].sort((a, b) => a.threshold - b.threshold)"
+                                          :key="`plan-${index}`"
+                                    >
+                                        {{ plan.threshold }} {{ plan.unit === 'PERCENT' ? '%' : '' }}
+                                    </span>
+                                </p>
+                                <div v-if="state.budgetAlertEdit">
+                                    <p-text-input appearance-type="stack"
+                                                  multi-input
+                                                  :selected="data.plans.map(plan => ({
+                                                      name: plan.threshold,
+                                                      label: Number(plan.threshold)
+                                                  }))"
+                                                  class="budget-alerts-thresholds"
+                                                  @update:selected="handleselectedBudgetThresholds"
+                                    >
+                                        <template #input-right>
+                                            (%)
+                                        </template>
+                                    </p-text-input>
+                                </div>
+                            </div>
+                        </div>
+                        <p-button v-if="!state.budgetAlertEdit && !storeState.isAdminMode && hasReadWriteAccess"
+                                  class="tertiary"
+                                  size="sm"
+                                  @click="state.budgetAlertEdit = true"
+                        >
+                            {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.EDIT') }}
+                        </p-button>
+                        <div v-else-if="state.budgetAlertEdit && !storeState.isAdminMode && hasReadWriteAccess"
+                             class="flex gap-2 items-end"
+                        >
+                            <p-button size="sm"
+                                      style-type="transparent"
+                                      @click="state.budgetAlertEdit = false"
+                            >
+                                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.CANCEL') }}
+                            </p-button>
+                            <p-button
+                                size="sm"
+                                @click="handleUpdateBudgetThresholds"
+                            >
+                                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.SAVE_CHANGES') }}
+                            </p-button>
+                        </div>
+                    </div>
+                </template>
+                <template #data-alertRecipients="{ data }">
+                    <div :class="{isDisplayed: !state.alertRecipientsEdit, isEditing: state.alertRecipientsEdit}">
+                        <p v-if="!state.alertRecipientsEdit"
+                           class="flex gap-1"
+                        >
+                            <span v-for="(d ,idx) in data"
+                                  :key="`${d}-${idx}`"
+                            >
+                                <span v-if="idx === data.length - 1">{{ d }}</span>
+                                <span v-else>{{ d }},</span>
+                            </span>
+                        </p>
+                        <user-select-dropdown
+                            v-else
+                            show-user-list
+                            selection-type="multiple"
+                            :selected-ids="data"
+                            @update:selected-ids="handleSelectAlertRecipients"
+                        />
+                        <p-button v-if="!state.alertRecipientsEdit && !storeState.isAdminMode && hasReadWriteAccess"
+                                  class="tertiary"
+                                  size="sm"
+                                  @click="state.alertRecipientsEdit = true"
+                        >
+                            {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.EDIT') }}
+                        </p-button>
+                        <div v-else-if="state.alertRecipientsEdit && !storeState.isAdminMode && hasReadWriteAccess"
+                             class="flex gap-2"
+                        >
+                            <p-button size="sm"
+                                      style-type="transparent"
+                                      @click="state.alertRecipientsEdit = false"
+                            >
+                                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.CANCEL') }}
+                            </p-button>
+                            <p-button size="sm"
+                                      @click="handleUpdateAlertRecipients"
+                            >
+                                {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.SAVE_CHANGES') }}
+                            </p-button>
+                        </div>
+                    </div>
+                </template>
+            </p-definition-table>
+        </p-card>
+        <budget-alerts-modal :visible="state.updateBudgetAlertsModalVisible"
+                             :budget-on-off-value="state.isBudgetAlertsEnabled"
+                             @update:visible="handleUpdateBudgetAlerts"
+        />
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.p-pane-layout {
+    @apply bg-gray-100;
+}
+
+.p-context-menu-item {
+    position: absolute;
+    z-index: 1000;
+}
+
+.budget-plan-monthly {
+    &.p-text-input {
+        width: 10rem;
+    }
+}
+
+.budget-alerts-thresholds {
+    &.p-text-input {
+        width: 13.125rem;
+    }
+}
+
+.overflow {
+    @apply grid grid-rows-2;
+}
+
+.isDisplayed {
+    @apply flex justify-between items-center;
+}
+
+.isEditing {
+    @apply flex flex-col justify-between items-end gap-1.5;
+    min-height: 240px;
+}
+</style>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailDeleteModal.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailDeleteModal.vue
index c6723ee189..aa939d8852 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailDeleteModal.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailDeleteModal.vue
@@ -1,77 +1,62 @@
-<template>
-    <p-double-check-modal :visible="proxyVisible"
-                          :header-title="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.DELETE_BUDGET')"
-                          :verification-text="verificationText"
-                          modal-size="sm"
-                          @confirm="handleConfirm"
-                          @update:visible="handleUpdate"
-    />
-</template>
-
-<script lang="ts">
-import {
-    computed, reactive, toRefs, watch,
-} from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PDoubleCheckModal } from '@cloudforet/mirinae';
 
 
 import type { BudgetDeleteParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/delete';
+import { i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
 
+interface Props {
+    visible: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    visible: false,
+});
 
-export default {
-    name: 'BudgetDetailDeleteModal',
-    components: {
-        PDoubleCheckModal,
-    },
-    props: {
-        visible: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    setup(props, { emit }) {
-        const budgetPageStore = useBudgetDetailPageStore();
-        const budgetPageState = budgetPageStore.$state;
+const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
+    (e: 'confirm'): void;
+}>();
 
-        const state = reactive({
-            proxyVisible: false,
-            verificationText: computed(() => budgetPageState.budgetData?.name || ''),
-        });
+const verificationText = computed(() => budgetPageState.budgetData?.name || '');
 
-        const handleConfirm = async () => {
-            try {
-                await SpaceConnector.client.costAnalysis.budget.delete<BudgetDeleteParameters>({
-                    budget_id: budgetPageState.budgetData?.budget_id ?? '',
-                });
-                state.proxyVisible = false;
-                emit('confirm');
-            } catch (e) {
-                ErrorHandler.handleError(e);
-            }
-        };
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetPageStore.$state;
 
-        const handleUpdate = (visible) => {
-            state.proxyVisible = visible;
-            emit('update', state.proxyVisible);
-        };
 
-        watch(() => props.visible, (visible) => {
-            if (visible !== state.proxyVisible) {
-                state.proxyVisible = visible;
-            }
+const handleConfirm = async () => {
+    try {
+        await SpaceConnector.clientV2.costAnalysis.budget.delete<BudgetDeleteParameters>({
+            budget_id: budgetPageState.budgetData?.budget_id ?? '',
         });
+        emit('update:visible', false);
+        emit('confirm');
+        showSuccessMessage('', i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.DELETE_SUCCESS'));
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
+};
 
-        return {
-            ...toRefs(state),
-            handleConfirm,
-            handleUpdate,
-        };
-    },
+const handleUpdate = () => {
+    emit('update:visible', false);
 };
 </script>
+
+<template>
+    <p-double-check-modal :visible="props.visible"
+                          :header-title="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.DELETE_BUDGET')"
+                          :verification-text="verificationText"
+                          modal-size="sm"
+                          @confirm="handleConfirm"
+                          @cancel="handleUpdate"
+                          @close="handleUpdate"
+    />
+</template>
+
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
index 07f13379bd..0b7226e2ac 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import { computed, reactive } from 'vue';
+import { computed, reactive, watch } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
 import {
-    PDivider, PHeading, PIconButton, PHeadingLayout,
+    PHeading, PHeadingLayout, PSelectDropdown,
 } from '@cloudforet/mirinae';
 
 import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
+import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { CURRENCY_SYMBOL } from '@/store/display/constant';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 import { useUserStore } from '@/store/user/user-store';
@@ -18,6 +18,7 @@ import { useUserStore } from '@/store/user/user-store';
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import BudgetDetailDeleteModal from '@/services/cost-explorer/components/BudgetDetailDeleteModal.vue';
+import BudgetNameEditModal from '@/services/cost-explorer/components/BudgetNameEditModal.vue';
 import { ADMIN_COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/admin/route-constant';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
@@ -45,6 +46,11 @@ const storeState = reactive({
     dataSourceMap: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
 });
 const state = reactive({
+    actionDropdownList: [
+        { name: 'rename', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.RENAME'), icon: 'ic_edit-text' },
+        { name: 'delete', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.DELETE'), icon: 'ic_delete' },
+    ],
+    selectedAction: '',
     budgetData: computed<BudgetModel|null>(() => budgetPageState.budgetData),
     isProjectTarget: computed(() => state.budgetData?.resource_group === 'PROJECT'),
     dataSourceName: computed(() => {
@@ -52,14 +58,27 @@ const state = reactive({
         return storeState.dataSourceMap[state.budgetData.data_source_id]?.label;
     }),
     deleteModalVisible: false,
+    nameEditModalVisible: false,
 });
 
+watch(() => state, () => {
+    if (state.selectedAction === 'delete') {
+        state.deleteModalVisible = true;
+    } else if (state.selectedAction === 'rename') {
+        state.nameEditModalVisible = true;
+    }
+}, { deep: true, immediate: true });
+
 /* Event */
-const handleClickDelete = () => {
-    state.deleteModalVisible = true;
+const handleUpdateNameEditModalVisible = () => {
+    state.selectedAction = '';
+    state.nameEditModalVisible = false;
+    budgetPageStore.getBudgetData(state.budgetData?.budget_id ?? '');
 };
-const handleUpdateDelete = (visible) => {
-    state.deleteModalVisible = visible;
+
+const handleUpdateDelete = () => {
+    state.selectedAction = '';
+    state.deleteModalVisible = false;
 };
 const handleConfirmDelete = () => {
     router.push({ name: storeState.isAdminMode ? ADMIN_COST_EXPLORER_ROUTE.BUDGET._NAME : COST_EXPLORER_ROUTE.BUDGET._NAME }).catch(() => {});
@@ -80,14 +99,28 @@ const handleClickBackButton = () => {
                     <template v-if="!props.loading"
                               #title-right-extra
                     >
-                        <p-icon-button v-if="hasReadWriteAccess && (storeState.isAdminMode || (state.isProjectTarget && storeState.isWorkspaceOwner))"
+                        <p-select-dropdown v-if="hasReadWriteAccess && (state.isProjectTarget && storeState.isWorkspaceOwner) && !storeState.isAdminMode"
+                                           style-type="tertiary-icon-button"
+                                           button-icon="ic_ellipsis-horizontal"
+                                           size="sm"
+                                           :menu="state.actionDropdownList"
+                                           :selected.sync="state.selectedAction"
+                        >
+                            <template #menu-item--format="{item}">
+                                <div class="flex items-center">
+                                    <p-i :name="item.icon" />
+                                    <span>{{ item.label }}</span>
+                                </div>
+                            </template>
+                        </p-select-dropdown>
+                        <!-- <p-icon-button v-if="hasReadWriteAccess && (storeState.isAdminMode || (state.isProjectTarget && storeState.isWorkspaceOwner))"
                                        name="ic_delete"
                                        @click="handleClickDelete"
-                        />
+                        /> -->
                     </template>
                 </p-heading>
             </template>
-            <template #extra>
+            <!-- <template #extra>
                 <div class="right-info-box">
                     <div class="right-item">
                         <span class="label">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.DATA_SOURCE') }}:</span>
@@ -101,13 +134,17 @@ const handleClickBackButton = () => {
                         <span>{{ CURRENCY_SYMBOL[state.budgetData?.currency] }}{{ state.budgetData?.currency }}</span>
                     </div>
                 </div>
-            </template>
+            </template> -->
         </p-heading-layout>
         <budget-detail-delete-modal v-if="!props.loading"
                                     :visible="state.deleteModalVisible"
-                                    @update="handleUpdateDelete"
+                                    @update:visible="handleUpdateDelete"
                                     @confirm="handleConfirmDelete"
         />
+        <budget-name-edit-modal :visible="state.nameEditModalVisible"
+                                :budget-name="state.budgetData?.name"
+                                @update:visible="handleUpdateNameEditModalVisible"
+        />
     </div>
 </template>
 
diff --git a/apps/web/src/services/cost-explorer/components/BudgetLastThreeMonthCostTrendBarChart.vue b/apps/web/src/services/cost-explorer/components/BudgetLastThreeMonthCostTrendBarChart.vue
new file mode 100644
index 0000000000..f3cd5387be
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetLastThreeMonthCostTrendBarChart.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import {
+    computed, reactive, ref, watch,
+} from 'vue';
+
+import dayjs from 'dayjs';
+import type { BarSeriesOption } from 'echarts/charts';
+import { init } from 'echarts/core';
+import type { EChartsType } from 'echarts/core';
+import { isEmpty } from 'lodash';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { PPaneLayout } from '@cloudforet/mirinae';
+
+import { CURRENCY_SYMBOL } from '@/store/display/constant';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { indigo } from '@/styles/colors';
+
+import { useBudgetCreatePageStore } from '../stores/budget-create-page-store';
+
+const budgetCreatePageStore = useBudgetCreatePageStore();
+const budgetCreatePageState = budgetCreatePageStore.state;
+
+const chartContext = ref<HTMLElement|null>(null);
+
+const state = reactive({
+    data: {},
+    xAxisData: computed(() => {
+        const startDate = budgetCreatePageState.startMonth.length > 0
+            ? dayjs.utc(budgetCreatePageState.startMonth[0])
+            : dayjs.utc().subtract(3, 'month');
+        const endDate = budgetCreatePageState.endMonth.length > 0
+            ? dayjs.utc(budgetCreatePageState.endMonth[0])
+            : dayjs.utc().subtract(1, 'month');
+        const monthDiff = endDate.diff(startDate, 'month');
+
+        return Array.from({ length: monthDiff + 1 }, (_, i) => startDate.add(i, 'month').format('YYYY-MM'));
+    }),
+    chart: null as EChartsType | null,
+    chartData: [],
+    chartOptions: computed<BarSeriesOption>(() => ({
+        color: indigo[400],
+        grid: {
+            left: '3%',
+            right: '3%',
+            top: '10%',
+            bottom: '5%',
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+            valueFormatter: (value) => Number(value).toFixed(2),
+        },
+        legend: {
+            show: false,
+        },
+        xAxisLabel: {
+            show: true,
+        },
+        xAxis: {
+            type: 'category',
+            data: state.xAxisData,
+            axisLabel: {
+                formatter: (value: string) => dayjs(value).format('MMM YYYY'),
+            },
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                formatter: (value: number) => {
+                    const currencySymbol = CURRENCY_SYMBOL[budgetCreatePageState.currency];
+                    return `${currencySymbol} ${value}`;
+                },
+            },
+        },
+        series: state.chartData,
+    })),
+});
+
+const processData = (results: any[]) => {
+    const allDates = state.xAxisData;
+
+    const dataMap: Record<string, number> = {};
+    results.forEach((item) => {
+        (item.cost_trend || []).forEach((trend) => {
+            dataMap[trend.date] = (dataMap[trend.date] || 0) + trend.value;
+        });
+    });
+
+    return allDates.map((date) => ({
+        date,
+        value: dataMap[date] || 0,
+    }));
+};
+
+const fetchBudgetUsageAnalyze = async () => {
+    try {
+        const { results } = await SpaceConnector.clientV2.costAnalysis.unifiedCost.analyze({
+            query: {
+                start: dayjs.utc(budgetCreatePageState.startMonth[0]).format('YYYY-MM'),
+                end: dayjs.utc(budgetCreatePageState.endMonth[0]).format('YYYY-MM'),
+                group_by: !budgetCreatePageState.scope.serviceAccount ? ['project_id', 'is_confirmed'] : ['project_id', 'service_account_id', 'is_confirmed'],
+                fields: {
+                    cost_trend: {
+                        key: `cost.${budgetCreatePageState.currency}`,
+                        operator: 'sum',
+                    },
+                },
+                granularity: 'MONTHLY',
+                field_group: ['date'],
+                filter: !budgetCreatePageState.scope.serviceAccount ? [
+                    { k: 'project_id', v: budgetCreatePageState.project, o: 'eq' },
+                ] : [
+                    { k: 'service_account_id', v: budgetCreatePageState.scope.serviceAccount, o: 'eq' },
+                ],
+            },
+        });
+        state.data = processData(results);
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+const drawChart = (data: any) => {
+    if (isEmpty(data)) return;
+
+    state.chartData = {
+        type: 'bar',
+        stack: false,
+        barMaxWidth: 50,
+        itemStyle: {
+            color: indigo[400],
+        },
+        label: {
+            show: true,
+            position: 'top',
+            formatter: (params) => `${CURRENCY_SYMBOL[budgetCreatePageState.currency]} ${Number(params.value).toFixed(2)}`,
+        },
+        data: data.map((item) => item.value),
+    };
+    state.chart = init(chartContext.value);
+    state.chart.setOption(state.chartOptions, true);
+};
+
+watch(() => state.data, () => {
+    drawChart(state.data);
+}, { deep: true, immediate: true });
+
+watch(() => budgetCreatePageState, async () => {
+    await fetchBudgetUsageAnalyze();
+}, { deep: true, immediate: true });
+</script>
+
+<template>
+    <p-pane-layout class="chart-wrapper p-4">
+        <p class="font-bold text-sm">
+            {{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.LAST_COST_TREND', {
+                count: budgetCreatePageState.startMonth.length > 0 && budgetCreatePageState.endMonth.length > 0
+                    ? Number(dayjs(budgetCreatePageState.endMonth[0], 'YYYY-MM').diff(dayjs(budgetCreatePageState.startMonth[0], 'YYYY-MM'), 'month') + 1)
+                    : 3,
+            }) }}
+        </p>
+        <div ref="chartContext"
+             class="chart"
+        />
+    </p-pane-layout>
+</template>
+
+<style scoped lang="postcss">
+.chart-wrapper {
+    width: 25rem;
+    height: 17rem;
+    .chart {
+        height: 100%;
+        width: 100%;
+    }
+}
+</style>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetListPeriodCustomModal.vue b/apps/web/src/services/cost-explorer/components/BudgetListPeriodCustomModal.vue
new file mode 100644
index 0000000000..9085d0825e
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetListPeriodCustomModal.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { reactive } from 'vue';
+
+import dayjs from 'dayjs';
+
+import { PButtonModal, PDatetimePicker } from '@cloudforet/mirinae';
+
+interface Props {
+  visible: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    visible: false,
+});
+
+const emit = defineEmits<{(e: 'update:month-range', value: [string, string]): void;
+  (e: 'update:visible', value: boolean): void;
+}>();
+
+const state = reactive({
+    startMonth: [],
+    endMonth: [],
+});
+
+const handleConfirm = () => {
+    emit('update:month-range', [state.startMonth[0], state.endMonth[0]]);
+    emit('update:visible', false);
+};
+
+const handleClose = () => {
+    state.startMonth = [];
+    state.endMonth = [];
+    emit('update:visible', false);
+};
+</script>
+
+<template>
+    <p-button-modal :visible="props.visible"
+                    size="sm"
+                    @confirm="handleConfirm"
+                    @cancel="handleClose"
+                    @close="handleClose"
+    >
+        <template #header-title>
+            <span>{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.SELECT_MONTH') }}</span>
+        </template>
+        <template #body>
+            <div class="flex items-center gap-2 mb-4">
+                <div class="flex flex-col gap-1">
+                    <span class="font-bold">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.MONTH') }}</span>
+                    <p-datetime-picker data-type="yearToMonth"
+                                       :selected-dates.sync="state.startMonth"
+                                       :max-date="dayjs.utc().format('YYYY-MM')"
+                                       :placeholder="String($t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.SELECT_MONTH'))"
+                    />
+                </div>
+                <span>~</span>
+                <div class="flex flex-col gap-1">
+                    <span class="font-bold">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.MONTH') }}</span>
+                    <p-datetime-picker data-type="yearToMonth"
+                                       :selected-dates.sync="state.endMonth"
+                                       :max-date="dayjs.utc().format('YYYY-MM')"
+                                       :placeholder="String($t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.SELECT_MONTH'))"
+                    />
+                </div>
+            </div>
+        </template>
+    </p-button-modal>
+</template>
+
+<style scoped lang="postcss">
+:deep(.p-datetime-picker) {
+    width: 12rem;
+}
+</style>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetMainList.vue b/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
index 6884206ac7..754405a9cf 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
@@ -1,84 +1,336 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import type { ComputedRef } from 'vue';
 import {
-    computed, reactive,
+    computed, onMounted, reactive, watch,
 } from 'vue';
 
+
+import dayjs from 'dayjs';
+
+import { makeDistinctValueHandler } from '@cloudforet/core-lib/component-util/query-search';
 import { QueryHelper } from '@cloudforet/core-lib/query';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
-import type { Sort, Query } from '@cloudforet/core-lib/space-connector/type';
+import type { ApiFilter } from '@cloudforet/core-lib/space-connector/type';
 import {
-    PDataLoader,
+    PToolboxTable, PSelectDropdown, PButtonModal, PI, PProgressBar, PStatus, PLink,
 } from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
-import type {
-    BudgetUsageAnalyzeParameters,
-    BudgetUsageAnalyzeResult,
-} from '@/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze';
+import type { BudgetListParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/list';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 import { SpaceRouter } from '@/router';
+import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useUserStore } from '@/store/user/user-store';
+import { CURRENCY_SYMBOL } from '@/store/display/constant';
+import type { Currency } from '@/store/display/type';
+import { useServiceAccountReferenceStore } from '@/store/reference/service-account-reference-store';
 
-import { FILE_NAME_PREFIX } from '@/lib/excel-export/constant';
-import { downloadExcel } from '@/lib/helper/file-download-helper';
-import type { ExcelDataField } from '@/lib/helper/file-download-helper/type';
+import type { ListResponse } from '@/lib/variable-models/_base/types';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useQueryTags } from '@/common/composables/query-tags';
+import ProjectLinkButton from '@/common/modules/project/ProjectLinkButton.vue';
 
-import BudgetMainListCard from '@/services/cost-explorer/components/BudgetMainListCard.vue';
-import BudgetMainToolbox from '@/services/cost-explorer/components/BudgetMainToolbox.vue';
-import {
-    getBudgetUsageAnalyzeRequestQuery,
-} from '@/services/cost-explorer/helpers/budget-usage-analyze-api-query-helper';
-import type { Period } from '@/services/cost-explorer/types/cost-explorer-query-type';
+import BudgetMainToolset from '@/services/cost-explorer/components/BudgetMainToolset.vue';
+import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
+
+import { BUDGET_SEARCH_HANDLERS } from '../constants/budget-constant';
+import { ADMIN_COST_EXPLORER_ROUTE } from '../routes/admin/route-constant';
+import { COST_EXPLORER_ROUTE } from '../routes/route-constant';
+import { useBudgetCreatePageStore } from '../stores/budget-create-page-store';
+import type { Period } from '../types/cost-explorer-query-type';
+import BudgetDeleteCheckModal from './BudgetDeleteCheckModal.vue';
+
+
+interface Props {
+  modalVisible: boolean;
+}
+
+interface BudgetMainListState {
+    budgets: BudgetModel[];
+    budgetUsages: {budget_id: string; name: string; budget: number; actual_spend: number; utilization: number; date: string; currency: Currency}[];
+    more: boolean;
+    loading: boolean;
+    modalVisible: boolean;
+    queryFilters: ConsoleFilter[];
+    pageStart: number;
+    pageLimit: number;
+    period: Period;
+    query: any;
+    isExpiredBudgetsHidden: boolean;
+    selectedIndex: number[];
+    isEditable: ComputedRef<boolean>;
+    isDeleteable: ComputedRef<boolean>;
+    selectedBudgetIds: string[];
+    addRequests: any;
+}
+
+interface BudgetQuery {
+    budgetUsed: string|undefined;
+    cycle: string|undefined;
+    period: string|undefined;
+    projectList: string[];
+    serviceAccountList: any[];
+    utilization?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modalVisible: false,
+});
 
+const emit = defineEmits<{(e: 'update:select-month-modal-visible', value: boolean): void;}>();
 
 const currentRoute = SpaceRouter.router.currentRoute;
 const queryHelper = new QueryHelper();
 const budgetUsageApiQueryHelper = new ApiQueryHelper();
+
 const appContextStore = useAppContextStore();
-const userStore = useUserStore();
-const storeState = reactive({
-    isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
-});
-const state = reactive({
-    budgetUsages: [] as BudgetUsageAnalyzeResult[],
-    loading: false,
+const serviceAccountReferenceStore = useServiceAccountReferenceStore();
+const budgetCreatePageStore = useBudgetCreatePageStore();
+const budgetCreatePageState = budgetCreatePageStore.state;
+
+const isAdminMode = computed<boolean>(() => appContextStore.getters.isAdminMode);
+
+const state = reactive<BudgetMainListState>({
+    budgets: [],
+    budgetUsages: [],
     more: false,
-    // query
-    queryFilters: queryHelper.setFiltersAsRawQueryString(currentRoute.query.filters).filters as ConsoleFilter[],
+    loading: false,
+    modalVisible: false,
+    queryFilters: queryHelper.setFiltersAsRawQueryString(currentRoute.query.filters).filters,
     pageStart: 1,
     pageLimit: 24,
-    period: {} as Period,
-    // api request params
-    sort: [{
-        key: 'budget_usage',
-        desc: true,
-    }] as Query['sort'],
-    timezone: computed<string>(() => userStore.state.timezone ?? 'UTC'),
+    period: {},
+    query: undefined,
+    isExpiredBudgetsHidden: false,
+    selectedIndex: [],
+    isEditable: computed<boolean>(() => state.selectedIndex.length === 1),
+    isDeleteable: computed<boolean>(() => state.selectedIndex.length > 0),
+    selectedBudgetIds: [],
+    addRequests: undefined,
 });
 
-const fetchBudgetUsages = async (): Promise<AnalyzeResponse<BudgetUsageAnalyzeResult>> => {
+const tableState = reactive({
+    fields: computed(() => [
+        {
+            name: 'name',
+            label: 'Name',
+            width: '13%',
+        },
+        {
+            name: 'target',
+            label: 'Target',
+            width: '20%',
+            sortable: false,
+        },
+        {
+            name: 'cycle',
+            label: 'Cycle',
+            width: '7%',
+        },
+        {
+            name: 'period',
+            label: 'Period',
+            width: '10%',
+            sortable: false,
+        },
+        {
+            name: 'limit',
+            label: 'Budget',
+            width: '10%',
+        },
+        {
+            name: 'actualSpend',
+            label: 'Actual Spend',
+            width: '10%',
+            sortable: false,
+        },
+        {
+            name: 'utilization_rate',
+            label: 'Utilization',
+            width: '10%',
+        },
+        {
+            name: 'remaining',
+            label: 'Remaining',
+            width: '10%',
+            sortable: false,
+        },
+        {
+            name: 'state',
+            label: 'State',
+            width: '7%',
+            sortable: false,
+        },
+    ]),
+    items: computed(() => (state.budgets || []).map((budget: BudgetModel) => {
+        const startDate = dayjs.utc(budget.start, 'YYYY-MM');
+        const endDate = dayjs.utc(budget.end, 'YYYY-MM');
+        return {
+            name: budget.name,
+            target: budget.service_account_id ? budget.service_account_id : budget.project_id,
+            cycle: budget.time_unit,
+            // eslint-disable-next-line no-nested-ternary
+            period: (budget.time_unit === 'TOTAL') || (budget.time_unit === 'MONTHLY' && endDate.isBefore(dayjs.utc(), 'month'))
+                ? `${startDate.format('YYYY-MM')} ~ ${endDate.format('YYYY-MM')}`
+                : (budget.time_unit === 'MONTHLY' && startDate.isAfter(dayjs.utc(), 'month'))
+                    ? startDate.format('YYYY-MM')
+                    : dayjs.utc().format('YYYY-MM'),
+            limit: budget.limit ?? 0,
+            actualSpend: budget.time_unit === 'MONTHLY' ? state.budgetUsages
+                .filter((budgetUsage) => budgetUsage.budget_id === budget.budget_id && dayjs.utc().format('YYYY-MM') === dayjs.utc(budgetUsage.date).format('YYYY-MM'))
+                .map((budgetUsage) => budgetUsage.actual_spend)[0] ?? 0
+                : (state.budgetUsages || []).filter((budgetUsage) => budgetUsage.budget_id === budget.budget_id).map((budgetUsage) => budgetUsage.actual_spend).reduce((acc, cur) => acc + cur, 0),
+            utilization_rate: budget.utilization_rate ? budget.utilization_rate : 0,
+            remaining: 0,
+            state: dayjs.utc().isSameOrAfter(startDate, 'month') && dayjs.utc().isSameOrBefore(endDate, 'month')
+                ? i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.ACTIVE_TIL_DATE') : 'EXPIRED',
+        };
+    })),
+    actionMenus: computed<MenuItem[]>(() => [
+        { name: 'delete', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.DELETE'), disabled: !state.isDeleteable },
+    ]),
+    selectedActionItem: '',
+    valueHandlerMap: computed(() => ({
+        name: makeDistinctValueHandler('cost_analysis.Budget', 'name', 'string'),
+        time_unit: makeDistinctValueHandler('cost_analysis.Budget', 'time_unit', 'string'),
+        budget_manager_id: makeDistinctValueHandler('cost_analysis.Budget', 'budget_manager_id', 'string'),
+    })),
+});
+
+const budgetApiQueryHelper = new ApiQueryHelper()
+    .setPage(state.pageStart, state.pageLimit)
+    .setSort('utilization_rate', true);
+
+const queryTagHelper = useQueryTags({ keyItemSets: BUDGET_SEARCH_HANDLERS });
+const { queryTags } = queryTagHelper;
+
+const handleModalVisible = (visible: boolean) => {
+    emit('update:select-month-modal-visible', visible);
+};
+
+const handleQuery = (query: BudgetQuery) => {
+    state.query = query;
+};
+
+const handleDeleteConfirm = async () => {
+    budgetCreatePageState.loading = true;
+    try {
+        await fetchBudgets();
+        await listBudgetUsages();
+    } finally {
+        state.selectedIndex = [];
+        budgetCreatePageState.loading = false;
+    }
+};
+
+const getBudgetFilters = (): ApiFilter[] => {
+    const filters: ApiFilter[] = [];
+
+    if (state.query?.target && state.query?.target !== 'all') {
+        if (state.query?.target === 'project') {
+            filters.push({
+                k: 'service_account_id',
+                v: [null, ''],
+                o: 'in',
+            });
+        } else if (state.query?.target === 'serviceAccount') {
+            filters.push({
+                k: 'service_account_id',
+                v: [null, ''],
+                o: 'not_in',
+            });
+        }
+    }
+
+    if (state.query?.year && state.query?.year !== 'all') {
+        filters.push({
+            k: 'budget_year',
+            v: state.query?.year,
+            o: 'eq',
+        });
+    }
+
+    if (state.query?.cycle && state.query.cycle !== 'all') {
+        filters.push({
+            k: 'time_unit',
+            v: state.query.cycle === 'fixedTerm' ? 'TOTAL' : 'MONTHLY',
+            o: 'eq',
+        });
+    }
+
+    if (state.query?.projectList && state.query?.projectList?.length) {
+        filters.push({
+            k: 'project_id',
+            v: state.query.projectList,
+            o: 'contain_in',
+        });
+    }
+
+    if (state.query?.serviceAccountList?.length) {
+        filters.push({
+            k: 'service_account_id',
+            v: state.query.serviceAccountList,
+            o: 'contain_in',
+        });
+    }
+
+    if (state.query?.utilization && state.query.utilization !== 'all') {
+        const utilizationMap: Record<string, number> = {
+            budgetExceeded: 100,
+            overNintyPercentSpent: 90,
+            overEightyPercentSpent: 80,
+            overSeventyPercentSpent: 70,
+            overSixtyPercentSpent: 60,
+            overFiftyPercentSpent: 50,
+            overFortyPercentSpent: 40,
+            overThirtyPercentSpent: 30,
+            overTwentyPercentSpent: 20,
+            overTenPercentSpent: 10,
+        };
+
+        const value = utilizationMap[state.query.utilization];
+        if (value !== undefined) {
+            filters.push({
+                k: 'utilization_rate',
+                v: value,
+                o: state.query.utilization === 'budgetExceeded' ? 'gt' : 'gte',
+            });
+        }
+    }
+
+    return filters;
+};
+
+/* API */
+const fetchBudgetUsages = async () => {
     try {
         state.loading = true;
-        budgetUsageApiQueryHelper
-            .setFilters(state.queryFilters)
-            .setPage(state.pageStart, state.pageLimit);
-        if (storeState.isAdminMode) {
+        if (isAdminMode.value) {
             budgetUsageApiQueryHelper.addFilter({
                 k: 'resource_group',
                 v: RESOURCE_GROUP.WORKSPACE,
             });
         }
-        const _query = getBudgetUsageAnalyzeRequestQuery(state.sort, state.period);
-        return await SpaceConnector.clientV2.costAnalysis.budgetUsage.analyze<BudgetUsageAnalyzeParameters, AnalyzeResponse<BudgetUsageAnalyzeResult>>({
+        return await SpaceConnector.clientV2.costAnalysis.budgetUsage.analyze({
             query: {
+                group_by: ['budget_id', 'name', 'date', 'currency', 'limit'],
+                fields: {
+                    actual_spend: {
+                        key: 'cost',
+                        operator: 'sum',
+                    },
+                    budget: {
+                        key: 'limit',
+                        operator: 'sum',
+                    },
+                },
+                page: { limit: 200 },
                 ...budgetUsageApiQueryHelper.data,
-                ..._query,
             },
         });
     } catch (e) {
@@ -89,118 +341,238 @@ const fetchBudgetUsages = async (): Promise<AnalyzeResponse<BudgetUsageAnalyzeRe
     }
 };
 
-const listBudgets = async () => {
+
+const fetchBudgets = async () => {
     if (state.loading) return;
+
+    const filters = getBudgetFilters();
+
+    const { results } = await SpaceConnector.clientV2.costAnalysis.budget.list<BudgetListParameters, ListResponse<BudgetModel>>({
+        query: {
+            filter: filters,
+            ...budgetApiQueryHelper.data,
+        },
+    });
+
+    state.budgets = results;
+};
+
+const listBudgetUsages = async () => {
     const { more, results } = await fetchBudgetUsages();
     state.budgetUsages = results ?? [];
     state.more = !!more;
 };
 
-/* Handlers */
-const handleUpdatePagination = (pageStart: number, pageLimit: number) => {
-    state.pageStart = pageStart;
-    state.pageLimit = pageLimit;
-    listBudgets();
-};
+const getServiceAccountName = (serviceAccountId: string): string|undefined => serviceAccountReferenceStore.getters.serviceAccountItems[serviceAccountId]?.label;
 
-const handleUpdatePeriod = (period: Period) => {
-    state.period = period;
-    listBudgets();
+const handleUpdateSelectIndex = async (indicies: number[]) => {
+    state.selectedIndex = indicies;
 };
 
-const handleUpdateFilters = (filters: ConsoleFilter[]) => {
-    state.queryFilters = filters;
-    SpaceRouter.router.replace({
-        query: {
-            filters: queryHelper.setFilters(filters).rawQueryStrings,
-        },
-    });
-    listBudgets();
+const handleDelete = () => {
+    state.modalVisible = true;
 };
 
-const handleRefresh = () => {
-    listBudgets();
-};
+const handleChange = async (options: any = {}) => {
+    if (options.pageStart !== undefined) state.pageStart = options.pageStart;
+    if (options.pageLimit !== undefined) state.pageLimit = options.pageLimit;
+    if (options.queryTags !== undefined) {
+        state.queryFilters = queryHelper.setFiltersAsQueryTag(options.queryTags).filters;
+    }
+
+    if (options.sortBy || options.sortDesc !== undefined) {
+        const key = options.sortBy ?? 'name';
+        const desc = options.sortDesc ?? true;
+        let budgetSortKey = key;
+        let usageSortKey = key;
 
-const handleExport = async () => {
-    const targetFields: ExcelDataField[] = [];
-    if (storeState.isAdminMode) {
-        targetFields.push({ key: 'workspace_id', name: 'Workspace ID' });
-    } else {
-        targetFields.push({ key: 'project_id', name: 'Project', reference: { reference_key: 'project_id', resource_type: 'identity.Project' } });
+        if (key === 'actualSpend') {
+            budgetSortKey = 'name';
+            usageSortKey = 'utilization_rate';
+        } else if (key === 'cycle') {
+            budgetSortKey = 'time_unit';
+        }
+
+        budgetApiQueryHelper.setSort(budgetSortKey, desc);
+        budgetUsageApiQueryHelper.setSort(usageSortKey, desc);
     }
-    const excelFields: ExcelDataField[] = [
-        ...targetFields,
-        { key: 'budget_id', name: 'Budget ID' },
-        { key: 'name', name: 'Budget Name' },
-        { key: 'data_source_id', name: 'Data Source ID' },
-        { key: 'provider_filter.providers', name: 'Providers' },
-        { key: 'total_spent', name: 'Total Spent' },
-        { key: 'total_budget', name: 'Total Budget' },
-        { key: 'budget_usage', name: 'Usage (%)' },
-    ];
-    await downloadExcel({
-        data: state.budgetUsages,
-        fields: excelFields,
-        file_name_prefix: FILE_NAME_PREFIX.budget,
-    });
-};
 
-const handleUpdateSort = (sort: Sort) => {
-    state.sort = [sort];
-    listBudgets();
+    budgetApiQueryHelper.setFilters(state.queryFilters);
+    await fetchBudgets();
+    await listBudgetUsages();
 };
 
-/* Init */
-(async () => {
-    await listBudgets();
-})();
+/* Watcher */
+watch(() => state.query, async () => {
+    state.addRequests = {
+        project_id: state.query?.projectList ?? [],
+    };
+    await fetchBudgets();
+}, { deep: true, immediate: true });
 
+watch(() => state.selectedIndex, () => {
+    state.selectedBudgetIds = [];
+    if (state.selectedIndex.length > 0) {
+        state.selectedIndex.forEach((i) => {
+            state.selectedBudgetIds.push(state.budgets[i].budget_id);
+        });
+    }
+}, { immediate: true });
 
+/* Mounted */
+onMounted(async () => {
+    await fetchBudgets();
+    await listBudgetUsages();
+});
 </script>
 
 <template>
-    <div class="budget-main-list">
-        <budget-main-toolbox
-            :filters="state.queryFilters"
-            :more="state.more"
-            @update-pagination="handleUpdatePagination"
-            @update-period="handleUpdatePeriod"
-            @update-filters="handleUpdateFilters"
-            @refresh="handleRefresh"
-            @export="handleExport"
-            @update-sort="handleUpdateSort"
+    <div>
+        <div class="flex flex-col gap-4">
+            <budget-main-toolset :modal-visible="props.modalVisible"
+                                 @update:select-month-modal-visible="handleModalVisible"
+                                 @update:query="handleQuery"
+            />
+            <p-toolbox-table :fields="tableState.fields"
+                             :items="tableState.items"
+                             multi-select
+                             selectable
+                             sortable
+                             sort-desc
+                             sort-by="utilization_rate"
+                             pagination-visible
+                             exportable
+                             search-type="query"
+                             searchable
+                             :select-index="state.selectedIndex"
+                             :key-item-sets="BUDGET_SEARCH_HANDLERS"
+                             :value-handler-map="tableState.valueHandlerMap"
+                             :query-tags="queryTags"
+                             @update:select-index="handleUpdateSelectIndex"
+                             @change="handleChange"
+                             @refresh="handleChange()"
+            >
+                <template #toolbox-left>
+                    <p-select-dropdown placeholder="Action"
+                                       :menu="tableState.actionMenus"
+                                       :selected.sync="tableState.selectedActionItem"
+                                       reset-selected-on-unmounted
+                                       @select="handleDelete"
+                    />
+                </template>
+                <template #col-name-format="{value, rowIndex}">
+                    <div class="flex flex-col gap-5">
+                        <p-link highlight
+                                :to="{
+                                    name: isAdminMode ? ADMIN_COST_EXPLORER_ROUTE.BUDGET.DETAIL._NAME : COST_EXPLORER_ROUTE.BUDGET.DETAIL._NAME,
+                                    params: {
+                                        budgetId: state.budgets[rowIndex].budget_id
+                                    }
+                                }"
+                        >
+                            {{ value }}
+                        </p-link>
+                    </div>
+                </template>
+                <template #col-limit-format="{item, value, rowIndex}">
+                    <p class="flex gap-0.5"
+                       :class="{ expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }"
+                    >
+                        <span>{{ CURRENCY_SYMBOL[state.budgets[rowIndex].currency] }}</span>
+                        <span>{{ Number(value).toLocaleString() }}</span>
+                    </p>
+                </template>
+                <template #col-cycle-format="{value, item}">
+                    <p class="flex gap-2 items-center"
+                       :class="{ expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }"
+                    >
+                        <span v-if="value === 'MONTHLY'">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.MONTHLY') }}</span>
+                        <span v-else>{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.FIXED_TERM') }}</span>
+                    </p>
+                </template>
+                <template #col-period-format="{value, item}">
+                    <span :class="{ expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }">{{ value }}</span>
+                </template>
+                <template #col-target-format="{value}">
+                    <div v-if="value.startsWith('project-')"
+                         class="flex items-center gap-0.5"
+                    >
+                        <p-i name="ic_project"
+                             width="1rem"
+                             height="1rem"
+                        />
+                        <project-link-button :project-id="value" />
+                    </div>
+                    <p-link v-else
+                            :text="value"
+                            action-icon="internal-link"
+                            new-tab
+                            :to="{
+                                name: SERVICE_ACCOUNT_ROUTE.DETAIL._NAME,
+                                params: {
+                                    serviceAccountId: value
+                                }
+                            }"
+                            icon-left="ic_service_security"
+                            class="flex gap-0.5 items-center"
+                    >
+                        <span>{{ getServiceAccountName(value) }}</span>
+                    </p-link>
+                </template>
+                <template #col-actualSpend-format="{item, value, rowIndex}">
+                    <p :class="{ expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }">
+                        {{ CURRENCY_SYMBOL[state.budgets[rowIndex].currency] }}
+                        {{ Number(value).toLocaleString() }}
+                    </p>
+                </template>
+                <template #col-utilization_rate-format="{item, value}">
+                    <div :class="{ expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }">
+                        <div v-if="value > -1">
+                            <p-progress-bar :percentage="value"
+                                            :color="Number(value) < 100
+                                                && Number(value) > 0
+                                                ? '#7F9CF5' : '#FF6A6A'"
+                            />
+                            <span>{{ Number(value).toFixed(2) }} %</span>
+                        </div>
+                    </div>
+                </template>
+                <template #col-remaining-format="{item, rowIndex}">
+                    <p :class="{exceeded: (Number(item.limit) - Number(item.actualSpend)) < 0, expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }">
+                        {{ CURRENCY_SYMBOL[state.budgets[rowIndex].currency] }}
+                        {{ Math.abs(Number((Number(item.limit) - Number(item.actualSpend)).toFixed(2))).toLocaleString() }}
+                    </p>
+                </template>
+                <template #col-state-format="{item}">
+                    <div v-if="dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD')">
+                        {{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.EXPIRED') }}
+                    </div>
+                    <p-status v-else
+                              theme="green"
+                              :text="$t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.ACTIVE_TIL_DATE')"
+                    />
+                </template>
+            </p-toolbox-table>
+        </div>
+        <p-button-modal header-title="Do you want to On/Off your Alert?" />
+        <budget-delete-check-modal
+            :visible="state.modalVisible"
+            :selected-indices="state.selectedBudgetIds"
+            @update:visible="state.modalVisible = $event"
+            @confirm="handleDeleteConfirm"
         />
-        <p-data-loader :data="state.budgetUsages"
-                       :loading="state.loading"
-        >
-            <div class="budget-list-card-box">
-                <budget-main-list-card
-                    v-for="(budgetUsage, i) in state.budgetUsages"
-                    :key="`${budgetUsage.budget_id}-${i}`"
-                    :budget-usage="budgetUsage"
-                />
-            </div>
-            <template #no-data>
-                <div class="no-budget-wrapper">
-                    {{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.NO_BUDGET') }}
-                </div>
-            </template>
-        </p-data-loader>
     </div>
 </template>
 
-<style lang="postcss" scoped>
-.budget-main-list {
-    /* custom design-system component - p-data-loader */
-    :deep(.p-data-loader) {
-        .no-data-wrapper {
-            min-height: 20rem;
-        }
-    }
-    .budget-list-card-box {
-        @apply grid grid-cols-2 gap-4;
-        @apply mobile:grid-cols-1;
+<style scoped lang="postcss">
+.expired {
+    opacity: 0.5;
+}
+
+.exceeded {
+    @apply text-red-500;
+    &::before {
+        content: '-';
     }
 }
 </style>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue b/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
new file mode 100644
index 0000000000..c6a6a35680
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import { computed, reactive, watch } from 'vue';
+
+import dayjs from 'dayjs';
+
+import { PSelectDropdown, PI, PDivider } 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 { ProjectReferenceMap } from '@/store/reference/project-reference-store';
+
+import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
+
+const emit = defineEmits<{(e: 'update:select-month-modal-visible', value: boolean): void; (e: 'update:query', value: any): void;}>();
+
+const allReferenceStore = useAllReferenceStore();
+const allReferenceGetters = allReferenceStore.getters;
+
+interface BudgetMainToolsetState {
+    targetList: SelectDropdownMenuItem[];
+    selectedTarget: string;
+    yearList: SelectDropdownMenuItem[];
+    selectedYear: string;
+    budgetCycleList: SelectDropdownMenuItem[];
+    selectedBudgetCycle: string;
+    projectList: SelectDropdownMenuItem[];
+    selectedProjectList: SelectDropdownMenuItem[];
+    serviceAccountList: SelectDropdownMenuItem[];
+    selectedServiceAccountList: SelectDropdownMenuItem[];
+    utilizationList: SelectDropdownMenuItem[];
+    selectedUtilization: string;
+}
+
+const storeState = reactive({
+    serviceAccount: computed(() => allReferenceGetters.serviceAccount),
+    project: computed<ProjectReferenceMap>(() => allReferenceGetters.project),
+});
+
+const state = reactive<BudgetMainToolsetState>({
+    targetList: [
+        { name: 'all', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.ALL') },
+        { name: 'project', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.PROJECT') },
+        { name: 'serviceAccount', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.SERVICE_ACCOUNT') },
+    ],
+    selectedTarget: 'all',
+    yearList: [
+        { name: 'all', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.ALL') },
+        { type: 'divider', name: 'divider' },
+        { name: dayjs.utc().add(1, 'year').format('YYYY'), label: dayjs.utc().add(1, 'year').format('YYYY') },
+        { name: dayjs.utc().format('YYYY'), label: dayjs.utc().format('YYYY') },
+        { name: dayjs.utc().subtract(1, 'year').format('YYYY'), label: dayjs.utc().subtract(1, 'year').format('YYYY') },
+    ],
+    selectedYear: 'all',
+    budgetCycleList: [
+        { name: 'all', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.ALL') },
+        { type: 'divider', name: 'divider' },
+        { name: 'monthly', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.MONTHLY') },
+        { name: 'fixedTerm', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.FIXED_TERM') },
+    ],
+    selectedBudgetCycle: 'all',
+    projectList: [{
+        type: 'item', name: 'all', label: 'All',
+    }, {
+        type: 'divider', name: 'divider',
+    }],
+    selectedProjectList: [],
+    serviceAccountList: [{
+        type: 'item', name: 'all', label: 'All',
+    }, {
+        type: 'divider', name: 'divider',
+    }],
+    selectedServiceAccountList: [],
+    utilizationList: [
+        { name: 'all', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.ALL') },
+        { name: 'divider', type: 'divider' },
+        { name: 'budgetExceeded', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_EXCEEDED') },
+        { name: 'overNintyPercentSpent', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_SPENT_USAGE', { percent: 90 }) },
+        { name: 'overEightyPercentSpent', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_SPENT_USAGE', { percent: 80 }) },
+        { name: 'overSeventyPercentSpent', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_SPENT_USAGE', { percent: 70 }) },
+        { name: 'overSixtyPercentSpent', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_SPENT_USAGE', { percent: 60 }) },
+        { name: 'overFiftyPercentSpent', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_SPENT_USAGE', { percent: 50 }) },
+        { name: 'overFortyPercentSpent', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_SPENT_USAGE', { percent: 40 }) },
+        { name: 'overThirtyPercentSpent', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_SPENT_USAGE', { percent: 30 }) },
+        { name: 'overTwentyPercentSpent', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_SPENT_USAGE', { percent: 20 }) },
+        { name: 'overTenPercentSpent', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_SPENT_USAGE', { percent: 10 }) },
+    ],
+    selectedUtilization: 'all',
+});
+
+watch(() => storeState.serviceAccount, () => {
+    state.serviceAccountList = [...state.serviceAccountList, ...Object.values(storeState.serviceAccount).map((serviceAccount: any, idx: number) => ({
+        name: Object.keys(storeState.serviceAccount)[idx],
+        label: serviceAccount.label,
+    }))];
+}, { deep: true, immediate: true });
+
+watch(() => storeState.project, () => {
+    state.projectList = [...state.projectList, ...Object.values(storeState.project).map((project, idx) => ({
+        name: Object.keys(storeState.project)[idx],
+        label: project.label,
+    }))];
+}, { deep: true, immediate: true });
+
+watch(() => state.selectedProjectList, () => {
+    if (state.selectedProjectList.map((project: any) => project.name).includes('all')) {
+        state.selectedProjectList = state.projectList.slice(2, state.projectList.length);
+    }
+}, { deep: true, immediate: true });
+
+watch(() => state.selectedServiceAccountList, () => {
+    if (state.selectedServiceAccountList.map((serviceAccount: any) => serviceAccount.name).includes('all')) {
+        state.selectedServiceAccountList = state.serviceAccountList.slice(2, state.serviceAccountList.length);
+    }
+}, { deep: true, immediate: true });
+
+watch(() => state, () => {
+    emit('update:query', {
+        target: state.selectedTarget,
+        projectList: state.selectedProjectList ?? [],
+        serviceAccountList: state.selectedServiceAccountList.map((s) => s.name),
+        year: state.selectedYear,
+        cycle: state.selectedBudgetCycle,
+        utilization: state.selectedUtilization,
+    });
+}, { deep: true, immediate: true });
+
+const handleProjectList = (projectIds) => {
+    state.selectedProjectList = projectIds;
+};
+</script>
+
+<template>
+    <div class="mt-3 flex gap-2 items-center">
+        <p-select-dropdown selection-label="Target"
+                           style-type="rounded"
+                           :menu="state.targetList"
+                           :selected.sync="state.selectedTarget"
+        />
+        <div class="flex gap-1 items-center">
+            <p-i name="ic_filter"
+                 width="14"
+                 height="14"
+            />
+            <span class="font-bold text-sm">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.FILTER') }}:</span>
+        </div>
+        <project-select-dropdown style-type="rounded"
+                                 appearance-type="badge"
+                                 selection-label="Project"
+                                 :project-group-selectable="false"
+                                 multi-selectable
+                                 show-dropdown-left-area
+                                 show-delete-all-button
+                                 @update:selected-project-ids="handleProjectList"
+        />
+        <p-select-dropdown style-type="rounded"
+                           :menu="state.serviceAccountList"
+                           :selected.sync="state.selectedServiceAccountList"
+                           :disabled="state.selectedTarget === 'project'"
+                           selection-label="Service Account"
+                           appearance-type="badge"
+                           use-fixed-menu-style
+                           show-select-marker
+                           multi-selectable
+                           show-clear-selection
+                           show-delete-all-button
+                           selection-highlight
+                           :page-size="15"
+        >
+            <template #dropdown-left-area>
+                <p-i name="ic_service_service-account"
+                     width="1rem"
+                     height="1rem"
+                />
+            </template>
+        </p-select-dropdown>
+        <p-divider
+            class="divider"
+        />
+        <p-select-dropdown style-type="rounded"
+                           :menu="state.budgetCycleList"
+                           :selected.sync="state.selectedBudgetCycle"
+                           selection-label="Cycle"
+        />
+        <p-select-dropdown style-type="rounded"
+                           :menu="state.yearList"
+                           :selected.sync="state.selectedYear"
+                           selection-label="Period (Year)"
+        />
+        <p-select-dropdown style-type="rounded"
+                           selection-label="Utilization"
+                           :menu="state.utilizationList"
+                           :selected.sync="state.selectedUtilization"
+                           :page-size="12"
+        />
+    </div>
+</template>
+
+<style>
+.divider {
+    height: 1rem;
+    width: 0.0625rem;
+}
+</style>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetNameEditModal.vue b/apps/web/src/services/cost-explorer/components/BudgetNameEditModal.vue
new file mode 100644
index 0000000000..60e9af27c2
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetNameEditModal.vue
@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+
+
+import { computed, reactive } from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
+
+import type { BudgetUpdateParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/update';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
+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 { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+
+interface Props {
+    visible: boolean;
+    budgetName: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+    visible: false,
+    budgetName: '',
+});
+
+const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
+}>();
+
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetPageStore.$state;
+
+const state = reactive({
+    loading: false,
+    budgetName: computed<string|undefined>(() => budgetPageState?.budgetData?.name),
+});
+
+const {
+    forms: { budgetName },
+    invalidState,
+    invalidTexts,
+    setForm,
+} = useFormValidator({
+    budgetName: props.budgetName,
+}, {
+    budgetName: (val: string) => {
+        if (val.length < 1) {
+            return 'nononono';
+            // return i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.BUDGET_NAME_INVALID');
+        } if (state.budgetName?.includes(val)) {
+            return true;
+        }
+        return true;
+    },
+});
+
+const updateBudgetName = async (params: BudgetUpdateParameters) => {
+    try {
+        state.loading = true;
+        await SpaceConnector.clientV2.costAnalysis.budget.update<BudgetUpdateParameters, BudgetModel>(params);
+        showSuccessMessage('', i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.NAME_EDIT_SUCCESS'));
+        emit('update:visible', false);
+    } catch (error) {
+        ErrorHandler.handleError(error, true);
+    } finally {
+        state.loading = false;
+    }
+};
+
+const handleCancel = () => {
+    emit('update:visible', false);
+};
+
+const handleConfirm = async () => {
+    if (budgetPageState.budgetData?.budget_id) {
+        await updateBudgetName({
+            budget_id: budgetPageState.budgetData?.budget_id,
+            name: budgetName.value,
+        });
+    }
+};
+</script>
+
+<template>
+    <p-button-modal :visible="props.visible"
+                    size="sm"
+                    header-title="Update Budget Name"
+                    :loading="state.loading"
+                    :disabled="invalidState.budgetName"
+                    @cancel="handleCancel"
+                    @close="handleCancel"
+                    @confirm="handleConfirm"
+    >
+        <template #body>
+            <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.BUDGET_NAME')"
+                           :invalid="invalidState.budgetName"
+                           :invalid-text="invalidTexts.budgetName"
+                           required
+            >
+                <template #default="{invalid}">
+                    <p-text-input :value="props.budgetName"
+                                  block
+                                  :invalid="invalid"
+                                  @update:value="setForm('budgetName', $event)"
+                    />
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrend.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrend.vue
new file mode 100644
index 0000000000..3300b00db1
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrend.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { PCard } from '@cloudforet/mirinae';
+
+import { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+import BudgetUsageTrendMonthly from './BudgetUsageTrendMonthly.vue';
+import BudgetUsageTrendTotal from './BudgetUsageTrendTotal.vue';
+
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetPageStore.$state;
+
+const budgetData = computed(() => budgetPageState.budgetData);
+</script>
+
+<template>
+    <p-card size="lg"
+            style-type="white"
+            :header="$t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.TITLE')"
+    >
+        <div v-if="budgetData?.time_unit === 'MONTHLY'">
+            <budget-usage-trend-monthly />
+        </div>
+        <div v-else-if="budgetData?.time_unit === 'TOTAL'">
+            <budget-usage-trend-total />
+        </div>
+    </p-card>
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthly.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthly.vue
new file mode 100644
index 0000000000..22c4d3bfd2
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthly.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+
+import { computed, reactive, watch } from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+import BudgetUsageTrendMonthlyChart from './BudgetUsageTrendMonthlyChart.vue';
+import BudgetUsageTrendMonthlyTable from './BudgetUsageTrendMonthlyTable.vue';
+
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetPageStore.$state;
+
+const state = reactive({
+    budgetData: computed(() => budgetPageState.budgetData),
+    data: [],
+});
+
+const fetchBudgetUsageAnalyze = async () => {
+    try {
+        const { results } = await SpaceConnector.clientV2.costAnalysis.budgetUsage.analyze({
+            budget_id: state.budgetData?.budget_id,
+            query: {
+                group_by: ['name', 'date', 'currency'],
+                fields: {
+                    budget_usage: {
+                        key: 'cost',
+                        operator: 'sum',
+                    },
+                    budget: {
+                        key: 'limit',
+                        operator: 'sum',
+                    },
+                },
+                sort: [{ key: 'date', desc: false }],
+            },
+        });
+        state.data = results;
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+watch(() => state.budgetData, async () => {
+    await fetchBudgetUsageAnalyze();
+}, { deep: true, immediate: true });
+</script>
+
+<template>
+    <div>
+        <budget-usage-trend-monthly-chart />
+        <budget-usage-trend-monthly-table :data="state.data" />
+    </div>
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue
new file mode 100644
index 0000000000..63384c44a0
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import {
+    computed, reactive, ref, watch,
+} from 'vue';
+
+import dayjs from 'dayjs';
+import type { BarSeriesOption } from 'echarts/charts';
+import { init } from 'echarts/core';
+import type { EChartsType } from 'echarts/core';
+import { isEmpty } from 'lodash';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { CURRENCY_SYMBOL } from '@/store/display/constant';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import {
+    indigo, red, yellow,
+} from '@/styles/colors';
+
+import { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetData = computed(() => budgetPageStore.$state.budgetData);
+
+const chartContext = ref<HTMLElement|null>(null);
+
+const state = reactive({
+    data: [],
+    xAxisData: computed(() => state.data.map((d) => dayjs.utc(d.date).format('MMM YYYY'))),
+    yAxisData: computed(() => [0, 25, 50, 75, 100]),
+    chart: null as EChartsType | null,
+    chartData: [],
+    chartOptions: computed<BarSeriesOption>(() => ({
+        grid: {
+            left: '3%',
+            right: '3%',
+            top: '10%',
+            bottom: '5%',
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+            formatter: (params: any) => {
+                const usageData = params.find((p) => p.seriesName === 'Budget Usage Trend');
+                if (!usageData) return '';
+
+                const index = usageData.dataIndex;
+                const item = state.data[index];
+
+                const usage = Number(item.budget_usage);
+                const budget = Number(item.budget);
+                const usageFormatted = usage.toLocaleString(undefined, { minimumFractionDigits: 3, maximumFractionDigits: 3 });
+                const budgetFormatted = budget.toLocaleString(undefined, { minimumFractionDigits: 3, maximumFractionDigits: 3 });
+                const rate = Math.floor((usage / budget) * 100);
+                const remaining = (budget - usage).toLocaleString(undefined, { minimumFractionDigits: 3, maximumFractionDigits: 3 });
+
+                const currency = CURRENCY_SYMBOL[budgetData.value?.currency ?? 'KRW'];
+                const month = dayjs.utc(item.date).format('MMM YYYY');
+
+                return `
+                    <div style="margin-bottom: 4px;"><b>${month}</b></div>
+                    <div>Planned Budget: ${currency} ${budgetFormatted}</div>
+                    <div>Actual Spend: ${currency} ${usageFormatted}</div>
+                    <div>Usage Rate: ${rate}%</div>
+                    <div>Budget Remaining: ${currency} ${remaining}</div>
+                `;
+            },
+        },
+        legend: {
+            show: false,
+        },
+        xAxis: {
+            type: 'category',
+            data: state.xAxisData,
+        },
+        yAxis: {
+            type: 'value',
+            min: 0,
+            max: Number(Math.max(...state.data.map((d) => (d.budget_usage / d.budget) * 100)).toFixed(0)) < 100
+                ? 100 : Math.max(...state.data.map((d) => (d.budget_usage / d.budget) * 100)).toFixed(0),
+            interval: 100,
+            axisLabel: {
+                formatter: (value) => `${value}%`,
+            },
+        },
+        series: state.chartData,
+    })),
+});
+
+const fetchBudgetUsageAnalyze = async () => {
+    try {
+        const { results } = await SpaceConnector.clientV2.costAnalysis.budgetUsage.analyze({
+            budget_id: budgetData.value?.budget_id,
+            query: {
+                group_by: ['name', 'date', 'currency'],
+                fields: {
+                    budget_usage: {
+                        key: 'cost',
+                        operator: 'sum',
+                    },
+                    budget: {
+                        key: 'limit',
+                        operator: 'sum',
+                    },
+                },
+                sort: [{ key: 'date', desc: false }],
+            },
+        });
+        state.data = results;
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+const drawChart = (data: any) => {
+    if (isEmpty(data)) return;
+
+    state.chartData = [
+        {
+            name: 'Budget Background (0~100%)',
+            type: 'bar',
+            data: state.data.map(() => 100),
+            barGap: '-100%',
+            itemStyle: {
+                color: indigo[100],
+            },
+            silent: true,
+        },
+        {
+            name: 'Budget Usage Trend',
+            type: 'bar',
+            data: state.data.map((item) => Number(((item.budget_usage / item.budget) * 100).toFixed(2))),
+            minBarHeight: 4,
+            label: {
+                show: true,
+                position: 'insideBottom',
+                distance: 4,
+                formatter: (params) => `${params.value}%`,
+            },
+            itemStyle: {
+                color: (params: any) => {
+                    const value = Number(params.value);
+                    if (value >= 100) return red[400];
+                    if (value >= 90) return yellow[500];
+                    return indigo[400];
+                },
+            },
+        },
+    ];
+    state.chart = init(chartContext.value);
+    state.chart.setOption(state.chartOptions, true);
+};
+
+watch(() => state.data, () => {
+    drawChart(state.data);
+}, { deep: true, immediate: true });
+
+watch(() => budgetData, async () => {
+    await fetchBudgetUsageAnalyze();
+}, { deep: true, immediate: true });
+</script>
+
+<template>
+    <div class="chart-wrapper">
+        <div ref="chartContext"
+             class="chart"
+        />
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.chart-wrapper {
+    height: 17rem;
+    .chart {
+        height: 100%;
+        width: 100%;
+    }
+}
+</style>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue
new file mode 100644
index 0000000000..872926ab6e
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+
+import dayjs from 'dayjs';
+
+import { PDataTable, PToggleButton, PLink } from '@cloudforet/mirinae';
+
+
+import { i18n } from '@/translations';
+
+import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+import { CURRENCY_SYMBOL } from '@/store/display/constant';
+
+import { COST_EXPLORER_ROUTE } from '../routes/route-constant';
+import { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+
+interface Props {
+    data: any;
+}
+
+const props = defineProps<Props>();
+
+const userWorkspaceStore = useUserWorkspaceStore();
+const currentWorkspaceId = computed(() => userWorkspaceStore.getters.currentWorkspaceId);
+
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetPageStore.$state;
+
+const budgetData = computed(() => budgetPageState.budgetData);
+
+const formatNumberToShort = (number: number) => {
+    if (number >= 1000000000) {
+        const value = number / 1000000000;
+        return `${value % 1 === 0 ? Math.floor(value) : value.toFixed(3)}B`;
+    }
+    if (number >= 1000000) {
+        const value = number / 1000000;
+        return `${value % 1 === 0 ? Math.floor(value) : value.toFixed(3)}M`;
+    }
+    if (number >= 1000) {
+        const value = number / 1000;
+        return `${value % 1 === 0 ? Math.floor(value) : value.toFixed(3)}K`;
+    }
+    return number.toString();
+};
+
+interface MonthData {
+    budget: number;
+    budget_usage: number;
+}
+
+interface DataByMonth {
+    [key: string]: MonthData;
+}
+
+const state = reactive({
+    data: computed(() => props.data),
+    isOriginalData: true,
+});
+
+const tableState = reactive({
+    fields: computed(() => {
+        if (!state.data.length) return [];
+
+        return [
+            {
+                name: 'category',
+                label: '',
+                width: '200px',
+            },
+            ...state.data.map((d) => ({
+                name: dayjs.utc(d.date).format('MMYYYY'),
+                label: dayjs.utc(d.date).format('MMM YYYY'),
+                textAlign: 'right',
+                width: '180px',
+            })),
+        ];
+    }),
+    items: computed(() => {
+        if (!state.data.length) return [];
+
+        const dataByMonth = state.data.reduce((acc, curr) => {
+            const monthKey = dayjs.utc(curr.date).format('MMYYYY');
+            acc[monthKey] = {
+                budget: curr.budget,
+                budget_usage: curr.budget_usage,
+            };
+            return acc;
+        }, {} as DataByMonth);
+
+        return [
+            {
+                category: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.PLANNED_BUDGET'),
+                ...Object.entries(dataByMonth).reduce((acc, [month, data]: any) => {
+                    acc[month] = data.budget;
+                    return acc;
+                }, {}),
+            },
+            {
+                category: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.ACTUAL_SPEND'),
+                ...Object.entries(dataByMonth).reduce((acc, [month, data]: any) => {
+                    acc[month] = data.budget_usage;
+                    return acc;
+                }, {}),
+            },
+            {
+                category: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.USAGE_RATE'),
+                ...Object.entries(dataByMonth).reduce((acc, [month, data]: any) => {
+                    acc[month] = Math.floor((data.budget_usage / data.budget) * 100);
+                    return acc;
+                }, {}),
+            },
+            {
+                category: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.BUDGET_REMAINING'),
+                ...Object.entries(dataByMonth).reduce((acc, [month, data]: any) => {
+                    acc[month] = data.budget - data.budget_usage;
+                    return acc;
+                }, {}),
+            },
+        ];
+    }),
+});
+
+const handleToggleOriginalData = (value: boolean) => {
+    state.isOriginalData = value;
+};
+</script>
+
+<template>
+    <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+            <span class="font-bold">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.ORIGINAL_DATA') }}</span>
+            <p-toggle-button :value="state.isOriginalData"
+                             @update:value="handleToggleOriginalData"
+            />
+        </div>
+        <p-data-table
+            :fields="tableState.fields"
+            :items="tableState.items"
+        >
+            <template #th-category>
+                <span />
+            </template>
+            <template #col-category-format="{value}">
+                <div v-if="value === i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.PLANNED_BUDGET')"
+                     class="flex items-center gap-2"
+                >
+                    <div class="w-3 h-3 bg-indigo-100 rounded-lg" />
+                    <span>{{ value }}</span>
+                </div>
+                <div v-else-if="value === i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.ACTUAL_SPEND')"
+                     class="flex items-center gap-2"
+                >
+                    <div class="w-3 h-3 bg-indigo-400 rounded-lg" />
+                    <span>{{ value }}</span>
+                </div>
+                <span v-else>{{ value }}</span>
+            </template>
+            <template #col-format="{ value, field, item }">
+                <template v-if="field.name !== 'category'">
+                    <span class="block text-right">
+                        <template v-if="item.category !== 'Usage Rate'">
+                            <p>
+                                <span>{{ CURRENCY_SYMBOL[budgetData?.currency ?? 'KRW'] }} </span>
+                                <span :class="{bold: item.category === i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.PLANNED_BUDGET')}">
+                                    {{ state.isOriginalData
+                                        ? value.toLocaleString()
+                                        : formatNumberToShort(value) }}
+                                </span>
+                            </p>
+                        </template>
+                        <template v-else>
+                            <span class="italic">{{ value }}%</span>
+                        </template>
+                    </span>
+                </template>
+            </template>
+        </p-data-table>
+        <p-link :to="{ name: COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME, params: {
+                    workspaceId: currentWorkspaceId,
+                } }"
+                highlight
+                class="link"
+                action-icon="external-link"
+        >
+            {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.GO_TO_COST_ANALYSIS') }}
+        </p-link>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.text-alert {
+    @apply text-red-500;
+}
+
+.link {
+    @apply pb-14;
+    margin: 0 auto;
+}
+
+.bold {
+    @apply font-bold;
+}
+</style>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotal.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotal.vue
new file mode 100644
index 0000000000..d99fa0ba8a
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotal.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+import BudgetUsageTrendTotalChart from './BudgetUsageTrendTotalChart.vue';
+import BudgetUsageTrendTotalTable from './BudgetUsageTrendTotalTable.vue';
+
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetPageStore.$state;
+
+const state = reactive({
+    budgetData: computed(() => budgetPageState.budgetData),
+    data: [],
+});
+
+const fetchBudgetUsageAnalyze = async () => {
+    try {
+        const { results } = await SpaceConnector.clientV2.costAnalysis.budgetUsage.analyze({
+            budget_id: state.budgetData?.budget_id,
+            query: {
+                group_by: ['name', 'date', 'currency'],
+                fields: {
+                    budget_usage: {
+                        key: 'cost',
+                        operator: 'sum',
+                    },
+                    budget: {
+                        key: 'limit',
+                        operator: 'sum',
+                    },
+                },
+                sort: [{ key: 'date', desc: false }],
+            },
+        });
+        state.data = results;
+    } catch (error) {
+        ErrorHandler.handleError(error);
+    }
+};
+
+watch(() => state.budgetData, async () => {
+    await fetchBudgetUsageAnalyze();
+}, { deep: true, immediate: true });
+</script>
+
+<template>
+    <div>
+        <budget-usage-trend-total-chart :data="state.data" />
+        <budget-usage-trend-total-table :data="state.data" />
+    </div>
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalChart.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalChart.vue
new file mode 100644
index 0000000000..5abf29b1ed
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalChart.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import {
+    computed, reactive, ref, watch,
+} from 'vue';
+
+import dayjs from 'dayjs';
+import type { BarSeriesOption } from 'echarts/charts';
+import type { EChartsType } from 'echarts/core';
+import { init } from 'echarts/core';
+import { isEmpty } from 'lodash';
+
+import type { Currency } from '@/store/display/type';
+
+import {
+    gray, indigo, peacock, red,
+    white,
+} from '@/styles/colors';
+
+import { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+
+const budgetpageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetpageStore.$state;
+
+
+interface Props {
+    data: any;
+}
+
+const props = defineProps<Props>();
+
+const chartContext = ref<HTMLElement|null>(null);
+
+const state = reactive({
+    data: computed(() => props.data),
+    xAxisData: computed(() => state.data.map((d) => dayjs.utc(d.date).format('MMM YYYY'))),
+    chart: null as EChartsType | null,
+    chartData: [],
+    chartOptions: computed<BarSeriesOption>(() => ({
+        grid: {
+            left: '3%',
+            right: '3%',
+            top: '10%',
+            bottom: '10%',
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+            formatter: (params) => {
+                const tooltipLines = [`${params[0].axisValue}`];
+                let accumulatedValue: string | null = null;
+                let accumulatedColor = peacock[400];
+
+                params.forEach((param) => {
+                    const value = Number(param.data);
+                    const formatted = Number.isNaN(value) ? '-' : value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+
+                    if (param.seriesName === 'Accumulated Usage (under Planned Budget)' || param.seriesName === 'Accumulated Usage (over Planned Budget)') {
+                        if (accumulatedValue === null || value > Number(accumulatedValue.replace(/,/g, ''))) {
+                            accumulatedValue = formatted;
+                            if (param.seriesName.includes('over')) {
+                                accumulatedColor = red[400];
+                            } else {
+                                accumulatedColor = peacock[400];
+                            }
+                        }
+                    } else {
+                        tooltipLines.push(`${param.marker} ${param.seriesName}: ${formatted}`);
+                    }
+                });
+
+                if (accumulatedValue !== null) {
+                    const marker = `<span style="display:inline-block;margin-right:4px;border-radius:50%;width:10px;height:10px;background-color:${accumulatedColor};"></span>`;
+                    tooltipLines.push(`${marker} Accumulated Usage: ${accumulatedValue}`);
+                }
+
+                return tooltipLines.join('<br/>');
+            },
+        },
+        legend: {
+            show: true,
+            left: '40px',
+            bottom: 0,
+            formatter: (name) => name,
+            textStyle: {
+                rich: {
+                    'Planned Budget': {
+                        lineHeight: 10,
+                    },
+                },
+            },
+        },
+        xAxis: {
+            type: 'category',
+            data: state.xAxisData,
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                formatter: (number) => {
+                    if (number >= 1000000000) {
+                        const value = number / 1000000000;
+                        return `${value % 1 === 0 ? Math.floor(value) : value.toFixed(2)}T`;
+                    }
+                    if (number >= 1000000) {
+                        const value = number / 1000000;
+                        return `${value % 1 === 0 ? Math.floor(value) : value.toFixed(2)}M`;
+                    }
+                    if (number >= 1000) {
+                        const value = number / 1000;
+                        return `${value % 1 === 0 ? Math.floor(value) : value.toFixed(2)}K`;
+                    }
+                    return number.toString();
+                },
+            },
+        },
+        series: state.chartData,
+    })),
+});
+
+const drawChart = (rawData: {
+    budget: number;
+    budget_usage: number;
+    currency: Currency;
+    date: string;
+    name: string;
+}[]) => {
+    const data = rawData.slice(0, 12);
+    if (isEmpty(data)) return;
+
+    const xAxisData = data.map((d) => dayjs.utc(d.date).format('MMM YYYY'));
+
+    let accumulatedValue = 0;
+    const accumulatedData: number[] = [];
+
+    data.forEach((item) => {
+        accumulatedValue += item.budget_usage;
+        accumulatedData.push(accumulatedValue);
+    });
+
+    const threshold = Number(budgetPageState.budgetData?.limit ?? 0);
+
+    const accumulatedBelow: (number | null)[] = [];
+    const accumulatedAbove: (number | null)[] = [];
+
+    let overThresholdStarted = false;
+
+    accumulatedData.forEach((val) => {
+        if (val > threshold) {
+            if (!overThresholdStarted) {
+                accumulatedBelow.push(val);
+                accumulatedAbove.push(val);
+                overThresholdStarted = true;
+            } else {
+                accumulatedBelow.push(null);
+                accumulatedAbove.push(val);
+            }
+        } else {
+            accumulatedBelow.push(val);
+            accumulatedAbove.push(null);
+        }
+    });
+
+    state.chartData = [
+        {
+            name: 'Actual Spend',
+            type: 'bar',
+            showBackground: false,
+            barWidth: '56px',
+            label: {
+                show: false,
+            },
+            data: data.map((item) => Number(item.budget_usage).toFixed(2)),
+            color: indigo[400],
+        },
+        {
+            name: 'Planned Budget',
+            type: 'line',
+            symbol: 'none',
+            lineStyle: {
+                type: 'dashed',
+                width: 1,
+                color: gray[600],
+            },
+            data: data.map(() => threshold),
+            legendHoverLink: false,
+            emphasis: { disabled: true },
+            itemStyle: {
+                borderWidth: 0,
+            },
+        },
+        {
+            name: 'Accumulated Usage (under Planned Budget)',
+            type: 'line',
+            data: accumulatedBelow,
+            lineStyle: {
+                color: peacock[400],
+                width: 3,
+            },
+            itemStyle: {
+                color: white[100],
+                borderColor: peacock[400],
+                borderWidth: 2,
+            },
+            symbol: 'circle',
+            symbolSize: 6,
+        },
+        {
+            name: 'Accumulated Usage (over Planned Budget)',
+            type: 'line',
+            data: accumulatedAbove,
+            lineStyle: {
+                color: red[400],
+                width: 3,
+            },
+            itemStyle: {
+                color: white[100],
+                borderColor: red[400],
+                borderWidth: 2,
+            },
+            symbol: 'circle',
+            symbolSize: 6,
+        },
+    ];
+
+    state.chart?.dispose();
+    state.chart = init(chartContext.value);
+    state.chart.setOption({
+        ...state.chartOptions,
+        xAxis: {
+            ...state.chartOptions.xAxis,
+            data: xAxisData,
+        },
+        series: state.chartData,
+    }, true);
+};
+
+watch([() => state.data, () => budgetPageState], () => {
+    drawChart(state.data);
+}, { deep: true, immediate: true });
+</script>
+
+<template>
+    <div class="chart-wrapper">
+        <div ref="chartContext"
+             class="chart"
+        />
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.chart-wrapper {
+    @apply mb-6;
+    height: 17rem;
+    .chart {
+        height: 100%;
+        width: 100%;
+    }
+}
+</style>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue
new file mode 100644
index 0000000000..6fc5da2983
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue
@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+
+import dayjs from 'dayjs';
+
+import {
+    PDataTable, PToggleButton, PLink, PTooltip, PI,
+} from '@cloudforet/mirinae';
+
+import { i18n } from '@/translations';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { CURRENCY_SYMBOL } from '@/store/display/constant';
+
+import { ADMIN_COST_EXPLORER_ROUTE } from '../routes/admin/route-constant';
+import { COST_EXPLORER_ROUTE } from '../routes/route-constant';
+import { useBudgetDetailPageStore } from '../stores/budget-detail-page-store';
+
+interface Props {
+    data: any;
+}
+
+interface MonthData {
+    budget: number;
+    budget_usage: number;
+}
+
+interface DataByMonth {
+    [key: string]: MonthData;
+}
+
+const props = defineProps<Props>();
+
+const budgetPageStore = useBudgetDetailPageStore();
+const budgetPageState = budgetPageStore.$state;
+const appContextStore = useAppContextStore();
+
+const budgetData = computed(() => budgetPageStore.$state.budgetData);
+const isAdminMode = computed<boolean>(() => appContextStore.getters.isAdminMode);
+
+
+
+const formatNumberToShort = (number: number) => {
+    if (number >= 1000000000) {
+        const value = number / 1000000000;
+        return `${value % 1 === 0 ? Math.floor(value) : value.toFixed(2)}T`;
+    }
+    if (number >= 1000000) {
+        const value = number / 1000000;
+        return `${value % 1 === 0 ? Math.floor(value) : value.toFixed(2)}M`;
+    }
+    if (number >= 1000) {
+        const value = number / 1000;
+        return `${value % 1 === 0 ? Math.floor(value) : value.toFixed(2)}K`;
+    }
+    return number.toString();
+};
+
+const state = reactive({
+    data: computed(() => props.data),
+    isOriginalData: true,
+    refinedData: computed(() => state.data.map((d) => ({
+        ...d,
+        budget_usage: d.budget * props.data.length,
+    }))),
+});
+
+const tableState = reactive({
+    fields: computed(() => {
+        if (!state.data.length) return [];
+
+        return [
+            {
+                name: 'category',
+                label: '',
+                width: '250px',
+            },
+            ...state.data.map((d) => ({
+                name: dayjs.utc(d.date).format('MMYYYY'),
+                label: dayjs.utc(d.date).format('MMM YYYY'),
+                textAlign: 'right',
+                width: '180px',
+            })),
+        ];
+    }),
+    items: computed(() => {
+        if (!state.data.length) return [];
+
+        const dataByMonth = state.data.reduce((acc, curr) => {
+            const monthKey = dayjs.utc(curr.date).format('MMYYYY');
+            acc[monthKey] = {
+                budget: curr.budget,
+                budget_usage: curr.budget_usage,
+            };
+            return acc;
+        }, {} as DataByMonth);
+
+        const monthKeys = Object.keys(dataByMonth).sort((a, b) => {
+            const yearA = Number(a.slice(2, 6));
+            const monthA = Number(a.slice(0, 2));
+            const yearB = Number(b.slice(2, 6));
+            const monthB = Number(b.slice(0, 2));
+
+            if (yearA !== yearB) {
+                return yearA - yearB;
+            }
+            return monthA - monthB;
+        });
+        const totalBudget = budgetData.value?.limit ?? 0;
+        let runningTotal = 0;
+
+        const accumulatedSpend = monthKeys.reduce((acc, month) => {
+            runningTotal += dataByMonth[month].budget_usage;
+            acc[month] = runningTotal;
+            return acc;
+        }, {} as Record<string, number>);
+
+        return [
+            {
+                category: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.PLANNED_BUDGET'),
+                ...monthKeys.reduce((acc, month) => {
+                    acc[month] = totalBudget;
+                    return acc;
+                }, {}),
+            },
+            {
+                category: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.ACTUAL_SPEND'),
+                ...monthKeys.reduce((acc, month) => {
+                    acc[month] = dataByMonth[month].budget_usage;
+                    return acc;
+                }, {}),
+            },
+            {
+                category: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.ACCUMULATED_USAGE'),
+                ...monthKeys.reduce((acc, month) => {
+                    acc[month] = accumulatedSpend[month] || 0;
+                    return acc;
+                }, {}),
+            },
+            {
+                category: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.USAGE_RATE'),
+                ...monthKeys.reduce((acc, month) => {
+                    acc[month] = (accumulatedSpend[month] / totalBudget) * 100;
+                    return acc;
+                }, {}),
+            },
+            {
+                category: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.BUDGET_REMAINING'),
+                ...monthKeys.reduce((acc, month) => {
+                    acc[month] = totalBudget - accumulatedSpend[month];
+                    return acc;
+                }, {}),
+            },
+        ];
+    }),
+});
+
+const handleToggleOriginalData = (value: boolean) => {
+    state.isOriginalData = value;
+};
+</script>
+
+<template>
+    <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+            <span class="font-bold">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.ORIGINAL_DATA') }}</span>
+            <p-toggle-button :value="state.isOriginalData"
+                             @update:value="handleToggleOriginalData"
+            />
+        </div>
+        <p-data-table
+            :fields="tableState.fields"
+            :items="tableState.items"
+        >
+            <template #th-category>
+                <span />
+            </template>
+            <template #col-category-format="{value}">
+                <div v-if="value === 'Actual Spend'"
+                     class="flex items-center gap-2"
+                >
+                    <div class="w-3 h-3 bg-indigo-400 rounded-lg" />
+                    <span>{{ value }}</span>
+                </div>
+                <div v-else-if="value === 'Accumulated Usage'"
+                     class="flex items-center gap-2"
+                >
+                    <div class="w-3 h-3 bg-peacock-400 rounded-lg" />
+                    <span>{{ value }}</span>
+                </div>
+                <div v-else-if="value === 'Usage Rate'"
+                     class="flex items-center gap-2"
+                >
+                    <span>{{ value }}</span>
+                    <p-tooltip contents="Accumulated Usage vs. Planned Budget">
+                        <template #default>
+                            <p-i name="ic_info-circle"
+                                 width="1rem"
+                                 height="1rem"
+                            />
+                        </template>
+                    </p-tooltip>
+                </div>
+            </template>
+            <template #col-format="{ value, field, item }">
+                <template v-if="field.name !== 'category'">
+                    <span class="block text-right px-4">
+                        <template v-if="item.category === $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.PLANNED_BUDGET')">
+                            <p class="font-bold text-gray-900">
+                                {{ CURRENCY_SYMBOL[budgetPageState.budgetData?.currency ?? 'KRW'] }}
+                                {{
+                                    state.isOriginalData ? Number(value).toFixed(2).toLocaleString()
+                                    : formatNumberToShort(value)
+                                }}
+                            </p>
+                        </template>
+                        <template v-else-if="item.category === $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.ACTUAL_SPEND')">
+                            {{ CURRENCY_SYMBOL[budgetPageState.budgetData?.currency ?? 'KRW'] }}
+                            {{ state.isOriginalData
+                                ? value.toLocaleString()
+                                : formatNumberToShort(value) }}
+                        </template>
+                        <template v-else-if="item.category ===$t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.ACCUMULATED_USAGE')">
+                            <p :class="{ exceeded: budgetPageState.budgetData
+                                && value > budgetPageState.budgetData?.limit }"
+                            >
+                                {{ CURRENCY_SYMBOL[budgetPageState.budgetData?.currency ?? 'KRW'] }}
+                                {{ state.isOriginalData ? value.toLocaleString() : formatNumberToShort(value) }}
+                            </p>
+                        </template>
+                        <template v-else-if="item.category === $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.USAGE_RATE')">
+                            <span :class="{exceeded: value > 100}"
+                                  class="italic"
+                            >
+                                {{ value.toFixed(0) }}%
+                            </span>
+                        </template>
+                        <template v-else-if="item.category === $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.BUDGET_REMAINING')">
+                            <p :class="{exceeded: value < 0, 'exceeded-budget': value < 0}">
+                                {{ CURRENCY_SYMBOL[budgetPageState.budgetData?.currency ?? 'KRW'] }}
+                                {{ !state.isOriginalData
+                                    ? formatNumberToShort(Math.abs(value.toFixed(2)))
+                                    : Math.abs(value).toLocaleString() }}
+                            </p>
+                        </template>
+                    </span>
+                </template>
+            </template>
+        </p-data-table>
+        <p-link :to="{ name: isAdminMode ? ADMIN_COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME
+                    : COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME}"
+                highlight
+                class="link"
+                action-icon="external-link"
+        >
+            {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.GO_TO_COST_ANALYSIS') }}
+        </p-link>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.text-alert {
+    @apply text-red-500;
+}
+
+.link {
+    @apply pb-14;
+    margin: 0 auto;
+}
+
+.exceeded {
+    @apply text-red-500;
+    &.exceeded-budget {
+        &::before {
+            content: '-';
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/cost-explorer/constants/budget-constant.ts b/apps/web/src/services/cost-explorer/constants/budget-constant.ts
new file mode 100644
index 0000000000..95c073a481
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/constants/budget-constant.ts
@@ -0,0 +1,12 @@
+import type { KeyItemSet } from '@cloudforet/mirinae/types/controls/search/query-search/type';
+
+export const BUDGET_SEARCH_HANDLERS: KeyItemSet[] = [
+    {
+        title: 'Properties',
+        items: [
+            { name: 'name', label: 'Name' },
+            { name: 'time_unit', label: 'Cycle' },
+            { name: 'budget_manager_id', label: 'Budget Manager' },
+        ],
+    },
+];
diff --git a/apps/web/src/services/cost-explorer/helpers/budget-usage-analyze-api-query-helper.ts b/apps/web/src/services/cost-explorer/helpers/budget-usage-analyze-api-query-helper.ts
index dd0f50012c..05800b2076 100644
--- a/apps/web/src/services/cost-explorer/helpers/budget-usage-analyze-api-query-helper.ts
+++ b/apps/web/src/services/cost-explorer/helpers/budget-usage-analyze-api-query-helper.ts
@@ -12,7 +12,7 @@ import type { Period } from '@/services/cost-explorer/types/cost-explorer-query-
 
 type BudgetUsageAnalyzeRequestGroupBy = Partial<keyof BudgetUsageAnalyzeResult>;
 const BUDGET_USAGE_ANALYZE_REQUEST_GROUP_BY: BudgetUsageAnalyzeRequestGroupBy[] = [
-    'budget_id', 'name', 'project_id', 'data_source_id', 'provider_filter', 'resource_group', 'workspace_id',
+    'budget_id', 'name', 'project_id', 'data_source_id', 'resource_group', 'workspace_id',
 ];
 
 type BudgetUsageAnalyzeRequestSelect = Record<BudgetUsageAnalyzeRequestGroupBy, any>;
@@ -23,7 +23,7 @@ const BUDGET_USAGE_ANALYZE_REQUEST_SELECT: BudgetUsageAnalyzeRequestSelect = {
     workspace_id: 'workspace_id',
     resource_group: 'resource_group',
     data_source_id: 'data_source_id',
-    provider_filter: 'provider_filter',
+    // provider_filter: 'provider_filter',
     total_spent: 'total_spent',
     total_budget: 'total_budget',
     budget_usage: 'budget_usage',
diff --git a/apps/web/src/services/cost-explorer/pages/BudgetCreatePage.vue b/apps/web/src/services/cost-explorer/pages/BudgetCreatePage.vue
index b85e863dc7..d79dfea420 100644
--- a/apps/web/src/services/cost-explorer/pages/BudgetCreatePage.vue
+++ b/apps/web/src/services/cost-explorer/pages/BudgetCreatePage.vue
@@ -1,16 +1,123 @@
 <script setup lang="ts">
-import { PHeading } from '@cloudforet/mirinae';
+import type { ComputedRef } from 'vue';
+import { computed, onUnmounted, reactive } from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+import { useRouter } from 'vue-router/composables';
 
-import BudgetCreateForm from '@/services/cost-explorer/components/BudgetCreateForm.vue';
+import { PCenteredLayoutHeader } from '@cloudforet/mirinae';
+
+
+
+import { i18n } from '@/translations';
+
+import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
+
+import BudgetCreateStep1 from '@/services/cost-explorer/components/BudgetCreateStep1.vue';
+import BudgetCreateStep2 from '@/services/cost-explorer/components/BudgetCreateStep2.vue';
+import BudgetCreateStep3 from '@/services/cost-explorer/components/BudgetCreateStep3.vue';
+
+import { COST_EXPLORER_ROUTE } from '../routes/route-constant';
+import { useBudgetCreatePageStore } from '../stores/budget-create-page-store';
+
+interface BudgetCreateState {
+    steps: ComputedRef<{
+        step: number;
+        title: TranslateResult | string;
+        description: TranslateResult | string;
+    }[]>;
+    closeConfirmModalVisible: boolean;
+}
+
+const router = useRouter();
+
+
+const budgetCreatePageStore = useBudgetCreatePageStore();
+const budgetCreatePageState = budgetCreatePageStore.state;
+
+const state = reactive<BudgetCreateState>({
+    steps: computed(() => [
+        {
+            step: 1,
+            title: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE_BUDGET'),
+            description: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.STEP1_DESC'),
+        },
+        {
+            step: 2,
+            title: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE_BUDGET'),
+            description: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.STEP2_DESCRIPTION'),
+        },
+        {
+            step: 3,
+            title: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SET_BUDGET_ALERTS'),
+            description: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.STEP3_DESCRIPTION'),
+        },
+    ]),
+    closeConfirmModalVisible: false,
+});
+
+const handleClickSecondPage = () => {
+    budgetCreatePageStore.setCurrentStep(2);
+};
+
+const handleClickThirdPage = () => {
+    budgetCreatePageState.currentStep = 3;
+};
+
+const openCancelModal = () => {
+    state.closeConfirmModalVisible = true;
+};
+
+const handleClickClose = () => {
+    budgetCreatePageStore.reset();
+    router.push({
+        name: COST_EXPLORER_ROUTE.BUDGET._NAME,
+    });
+};
+
+onUnmounted(() => {
+    budgetCreatePageStore.reset();
+});
 </script>
 
 <template>
-    <div>
-        <p-heading class="mb-6"
-                   :title="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE_BUDGET')"
-                   show-back-button
-                   @click-back-button="$router.go(-1)"
+    <div class="budget-create-page"
+         :class="[`step-${budgetCreatePageState.currentStep}`]"
+    >
+        <p-centered-layout-header :title="state.steps[budgetCreatePageState.currentStep - 1].title"
+                                  :description="state.steps[budgetCreatePageState.currentStep - 1].description"
+                                  :total-steps="state.steps.length"
+                                  :current-step="budgetCreatePageState.currentStep"
+                                  show-step
+                                  show-close-button
+                                  @close="openCancelModal"
+        />
+        <budget-create-step1 v-if="budgetCreatePageState.currentStep === 1"
+                             @click-next="handleClickSecondPage"
+                             @click-cancel="openCancelModal"
+        />
+        <budget-create-step2 v-else-if="budgetCreatePageState.currentStep === 2"
+                             @click-next="handleClickThirdPage"
+        />
+        <budget-create-step3 v-else-if="budgetCreatePageState.currentStep === 3" />
+        <confirm-back-modal :visible.sync="state.closeConfirmModalVisible"
+                            @cancel="state.closeConfirmModalVisible = false"
+                            @close="state.closeConfirmModalVisible = false"
+                            @confirm="handleClickClose"
         />
-        <budget-create-form />
     </div>
 </template>
+
+<style scoped lang="postcss">
+.budget-create-page {
+    margin: 9rem auto;
+    &.step-1 {
+        width: 62.5rem;
+    }
+    &.step-2 {
+        width: 62.5rem;
+    }
+    &.step-3 {
+        width: 62.5rem;
+    }
+}
+</style>
diff --git a/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue b/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue
index 4831659b94..3c8644bc8d 100644
--- a/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue
@@ -12,18 +12,15 @@ import { useUserStore } from '@/store/user/user-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import BudgetDetailBaseInformation from '@/services/cost-explorer/components/BudgetDetailBaseInformation.vue';
 import BudgetDetailHeading from '@/services/cost-explorer/components/BudgetDetailHeading.vue';
-import BudgetDetailInfo from '@/services/cost-explorer/components/BudgetDetailInfo.vue';
-import BudgetDetailNotifications
-    from '@/services/cost-explorer/components/BudgetDetailNotifications.vue';
-import BudgetDetailSummary
-    from '@/services/cost-explorer/components/BudgetDetailSummary.vue';
 import { ADMIN_COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/admin/route-constant';
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
 
+import BudgetUsageTrend from '../components/BudgetUsageTrend.vue';
 
 interface Props {
-    budgetId: string;
+  budgetId: string;
 }
 const props = withDefaults(defineProps<Props>(), {
     budgetId: '',
@@ -59,47 +56,51 @@ const state = reactive({
         state.loading = false;
     }
 })();
-
 </script>
 
 <template>
     <div>
         <portal to="page-top-notification">
-            <p-scoped-notification v-if="state.isWorkspaceTarget"
-                                   type="information"
-                                   :title="i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.PAGE_NOTIFICATION')"
-                                   icon="ic_info-circle"
+            <p-scoped-notification
+                v-if="state.isWorkspaceTarget"
+                type="information"
+                :title="
+                    i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.PAGE_NOTIFICATION')
+                "
+                icon="ic_info-circle"
             >
                 <template v-if="userStore.getters.isDomainAdmin"
                           #right
                 >
-                    <p-link class="notification-link"
-                            action-icon="internal-link"
-                            highlight
-                            new-tab
-                            :to="state.adminModeLink"
+                    <p-link
+                        class="notification-link"
+                        action-icon="internal-link"
+                        highlight
+                        new-tab
+                        :to="state.adminModeLink"
                     >
-                        {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.VIEW_IN_ADMIN_MODE') }}
+                        {{ $t("BILLING.COST_MANAGEMENT.BUDGET.DETAIL.VIEW_IN_ADMIN_MODE") }}
                     </p-link>
                 </template>
             </p-scoped-notification>
         </portal>
         <budget-detail-heading :loading="state.loading" />
         <section class="content">
-            <budget-detail-info class="summary" />
+            <budget-detail-base-information />
+            <budget-usage-trend />
+            <!-- <budget-detail-info class="summary" />
+            <budget-detail-notifications v-if="state.visibleBudgetNotification && !state.isWorkspaceTarget"
             <budget-detail-summary
                 :budget-loading="state.loading"
                 class="summary"
             />
-            <budget-detail-notifications v-if="state.visibleBudgetNotification && !state.isWorkspaceTarget"
                                          class="alert"
                                          :currency="state.budgetData?.currency"
-            />
+            /> -->
         </section>
     </div>
 </template>
 
-
 <style lang="postcss" scoped>
 .content {
     @apply flex flex-col;
diff --git a/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue b/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue
index cb22839858..d88d7a97b8 100644
--- a/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { computed, reactive, ref } from 'vue';
 
 import {
     PHeading, PDivider, PButton, PHeadingLayout,
@@ -12,6 +12,7 @@ import { useUserStore } from '@/store/user/user-store';
 
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
+import BudgetListPeriodCustomModal from '@/services/cost-explorer/components/BudgetListPeriodCustomModal.vue';
 import BudgetMainList from '@/services/cost-explorer/components/BudgetMainList.vue';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
@@ -23,29 +24,54 @@ const storeState = reactive({
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
 });
 
+const state = reactive({
+    modalVisible: false,
+    startMonth: '',
+    endMonth: '',
+});
+
+const modalVisible = ref<boolean>(false);
+
 const handleCreateBudgetSelect = () => {
     SpaceRouter.router.push({ name: COST_EXPLORER_ROUTE.BUDGET.CREATE._NAME });
 };
+
+const handleModalVisible = (visible: boolean) => {
+    modalVisible.value = visible;
+};
+
+const handleMonthRange = (monthRange: [string, string]) => {
+    state.startMonth = monthRange[0];
+    state.endMonth = monthRange[1];
+};
 </script>
 
 <template>
-    <div class="budget-page">
-        <p-heading-layout class="mb-6">
-            <template #heading>
-                <p-heading :title="$t('BILLING.COST_MANAGEMENT.MAIN.BUDGET')" />
-            </template>
-            <template v-if="hasReadWriteAccess && storeState.isWorkspaceOwner"
-                      #extra
-            >
-                <p-button style-type="primary"
-                          icon-left="ic_plus_bold"
-                          @click="handleCreateBudgetSelect"
+    <div>
+        <div class="budget-page">
+            <p-heading-layout class="mb-6">
+                <template #heading>
+                    <p-heading :title="$t('BILLING.COST_MANAGEMENT.MAIN.BUDGET')" />
+                </template>
+                <template v-if="hasReadWriteAccess && storeState.isWorkspaceOwner"
+                          #extra
                 >
-                    {{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.CREATE') }}
-                </p-button>
-            </template>
-        </p-heading-layout>
-        <p-divider />
-        <budget-main-list />
+                    <p-button style-type="primary"
+                              icon-left="ic_plus_bold"
+                              @click="handleCreateBudgetSelect"
+                    >
+                        {{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.CREATE') }}
+                    </p-button>
+                </template>
+            </p-heading-layout>
+            <p-divider />
+            <budget-main-list :modal-visible="modalVisible"
+                              @update:select-month-modal-visible="handleModalVisible"
+            />
+        </div>
+        <budget-list-period-custom-modal :visible="modalVisible"
+                                         @update:visible="handleModalVisible"
+                                         @update:month-range="handleMonthRange"
+        />
     </div>
 </template>
diff --git a/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetDetailPage.vue b/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetDetailPage.vue
index d66c090535..82acca91e8 100644
--- a/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetDetailPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetDetailPage.vue
@@ -6,11 +6,11 @@ import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/mode
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import BudgetDetailHeading from '@/services/cost-explorer/components/BudgetDetailHeading.vue';
-import BudgetDetailInfo from '@/services/cost-explorer/components/BudgetDetailInfo.vue';
-import BudgetDetailSummary
-    from '@/services/cost-explorer/components/BudgetDetailSummary.vue';
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
 
+import BudgetDetailBaseInformation from '../../components/BudgetDetailBaseInformation.vue';
+import BudgetUsageTrend from '../../components/BudgetUsageTrend.vue';
+
 
 interface Props {
     budgetId: string;
@@ -46,11 +46,13 @@ const state = reactive({
     <div>
         <budget-detail-heading :loading="state.loading" />
         <section class="content">
-            <budget-detail-info class="summary" />
+            <budget-detail-base-information />
+            <budget-usage-trend />
+            <!-- <budget-detail-info class="summary" />
             <budget-detail-summary
                 :budget-loading="state.loading"
                 class="summary"
-            />
+            /> -->
         </section>
     </div>
 </template>
diff --git a/apps/web/src/services/cost-explorer/routes/admin/routes.ts b/apps/web/src/services/cost-explorer/routes/admin/routes.ts
index 00aa25ca82..fb97bc1716 100644
--- a/apps/web/src/services/cost-explorer/routes/admin/routes.ts
+++ b/apps/web/src/services/cost-explorer/routes/admin/routes.ts
@@ -21,7 +21,7 @@ const CostAdvancedSettingsContainer = () => import('@/services/cost-explorer/com
 const CostExplorerContainer = () => import('@/services/cost-explorer/CostExplorerContainer.vue');
 
 const AdminBudgetMainPage = () => import('@/services/cost-explorer/pages/admin/AdminBudgetMainPage.vue');
-const AdminBudgetCreatePage = () => import('@/services/cost-explorer/pages/admin/AdminBudgetCreatePage.vue');
+// const AdminBudgetCreatePage = () => import('@/services/cost-explorer/pages/admin/AdminBudgetCreatePage.vue');
 const AdminBudgetDetailPage = () => import('@/services/cost-explorer/pages/admin/AdminBudgetDetailPage.vue');
 const AdminDomainSettingsAnomalyDetectionConfigurationPage = () => import('@/services/cost-explorer/pages/admin/AdminAdvancedSettingsAnomalyDetectionConfigurationPage.vue');
 const AdminDomainSettingsCurrencyConverterPage = () => import('@/services/cost-explorer/pages/admin/AdminAdvancedSettingsCurrencyConverterPage.vue');
@@ -124,12 +124,12 @@ const adminCostExplorerRoutes: RouteConfig = {
                     meta: { menuId: MENU_ID.BUDGET },
                     component: AdminBudgetMainPage as any,
                 },
-                {
-                    path: 'create',
-                    name: ADMIN_COST_EXPLORER_ROUTE.BUDGET.CREATE._NAME,
-                    meta: { translationId: 'BILLING.COST_MANAGEMENT.BUDGET.MAIN.CREATE_BUDGET' },
-                    component: AdminBudgetCreatePage as any,
-                },
+                // {
+                //     path: 'create',
+                //     name: ADMIN_COST_EXPLORER_ROUTE.BUDGET.CREATE._NAME,
+                //     meta: { translationId: 'BILLING.COST_MANAGEMENT.BUDGET.MAIN.CREATE_BUDGET' },
+                //     component: AdminBudgetCreatePage as any,
+                // },
                 {
                     path: ':budgetId',
                     name: ADMIN_COST_EXPLORER_ROUTE.BUDGET.DETAIL._NAME,
diff --git a/apps/web/src/services/cost-explorer/stores/budget-create-page-store.ts b/apps/web/src/services/cost-explorer/stores/budget-create-page-store.ts
new file mode 100644
index 0000000000..c1e1a493f0
--- /dev/null
+++ b/apps/web/src/services/cost-explorer/stores/budget-create-page-store.ts
@@ -0,0 +1,212 @@
+import { reactive } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { BudgetNotificationRecipients } from '@/api-clients/cost-analysis/budget/schema/type';
+
+import type { Currency } from '@/store/display/type';
+
+interface BudgetCreatePageState {
+    loading: boolean;
+    currentStep: number;
+    name: string;
+    project: string;
+    scope: {
+        type: string;
+        serviceAccount: string|undefined;
+    };
+    selectedBudgetManagerList: string[];
+    recipients: BudgetNotificationRecipients;
+    currency: Currency;
+    time_unit: 'TOTAL' | 'MONTHLY' | '';
+    startMonth: string[];
+    endMonth: string[];
+    alreadyExistingBudgetYear: string[];
+    budgetYear: string;
+    temp: string;
+    limit: number|undefined;
+    planned_limits: {
+        date: string;
+        limit: number;
+    }[] | undefined;
+    state: 'ENABLED' | 'DISABLED';
+    thresholds: {
+        value: number|undefined;
+    }[];
+    budgetManager: string;
+    selectedMonthlyBudgetAllocation: string|undefined;
+    budgetAppliedSameAmount: number|undefined;
+    initialAmount: number|undefined,
+    monthlyGrowthRate: number|undefined,
+    analyzedCostData: number|undefined,
+    budgetEachDate: any;
+}
+
+export const useBudgetCreatePageStore = defineStore('page-budget-create', () => {
+    const state = reactive<BudgetCreatePageState>({
+        loading: false,
+        currentStep: 1,
+        name: '',
+        project: '',
+        scope: {
+            type: 'project',
+            serviceAccount: '',
+        },
+        selectedBudgetManagerList: [],
+        recipients: {
+            users: [],
+        },
+        currency: 'KRW',
+        time_unit: '',
+        startMonth: [],
+        endMonth: [],
+        alreadyExistingBudgetYear: [],
+        budgetYear: '',
+        temp: '',
+        limit: undefined,
+        planned_limits: [],
+        state: 'ENABLED',
+        thresholds: [
+            {
+                value: undefined,
+            },
+        ],
+        budgetManager: '',
+        selectedMonthlyBudgetAllocation: undefined,
+        budgetAppliedSameAmount: undefined,
+        initialAmount: undefined,
+        monthlyGrowthRate: undefined,
+        analyzedCostData: undefined,
+        budgetEachDate: [],
+    });
+    const setName = (name: string) => {
+        state.name = name;
+    };
+    const setCurrentStep = (step: number) => {
+        state.currentStep = step;
+    };
+    const setProject = (projectId: string) => {
+        state.project = projectId;
+    };
+    const setScope = (value: any) => {
+        state.scope = value;
+    };
+    const setCurrency = (currency: any) => {
+        state.currency = currency;
+    };
+    const setStart = (startMonth: []) => {
+        state.startMonth = startMonth;
+    };
+    const setEnd = (endMonth: []) => {
+        state.endMonth = endMonth;
+    };
+    const setExistingBudgetYear = (years: string[]) => {
+        state.alreadyExistingBudgetYear = years;
+    };
+    const setBudgetYear = (year: string) => {
+        state.budgetYear = year;
+    };
+    const setTimeUnit = (time_unit) => {
+        state.time_unit = time_unit;
+    };
+    const setPlannedLimits = (planned_limit) => {
+        state.planned_limits = planned_limit;
+    };
+    const setTemp = (t) => { state.temp = t; };
+    const setLimit = (limit: number) => { state.limit = limit; };
+    const setThresholds = (thresholds: { value: number }) => {
+        state.thresholds.push(thresholds);
+    };
+    const setRecipients = (recipients: string[]) => {
+        state.recipients.users = recipients;
+    };
+    const setBudgetManager = (user_id: string) => {
+        state.budgetManager = user_id;
+    };
+    const setSelectedMonthlyBudgetAllocation = (value: string | undefined) => {
+        state.selectedMonthlyBudgetAllocation = value;
+    };
+    const setBudgetEachDate = (index: number, value: string) => {
+        state.budgetEachDate[index] = value;
+    };
+    const setBudgetAppliedSameAmount = (value: number | undefined) => {
+        state.budgetAppliedSameAmount = value;
+    };
+    const setInitialAmount = (value: number | undefined) => {
+        state.initialAmount = value;
+    };
+    const setMonthlyGrowthRate = (value: number | undefined) => {
+        state.monthlyGrowthRate = value;
+    };
+    const mutations = {
+        setName,
+        setCurrentStep,
+        setProject,
+        setScope,
+        setCurrency,
+        setStart,
+        setEnd,
+        setExistingBudgetYear,
+        setBudgetYear,
+        setTimeUnit,
+        setTemp,
+        setLimit,
+        setPlannedLimits,
+        setThresholds,
+        setRecipients,
+        setBudgetManager,
+        setSelectedMonthlyBudgetAllocation,
+        setBudgetEachDate,
+        setBudgetAppliedSameAmount,
+        setInitialAmount,
+        setMonthlyGrowthRate,
+    };
+
+    const reset = () => {
+        state.loading = false;
+        state.name = '';
+        state.currentStep = 1;
+        state.project = '';
+        state.scope = {
+            type: 'project',
+            serviceAccount: '',
+        };
+        state.selectedBudgetManagerList = [];
+        state.recipients = {
+            users: [],
+        };
+        state.currency = 'KRW';
+        state.time_unit = '';
+        state.startMonth = [];
+        state.endMonth = [];
+        state.alreadyExistingBudgetYear = [];
+        state.budgetYear = '';
+        state.temp = '';
+        state.limit = undefined;
+        state.planned_limits = [];
+        state.state = 'ENABLED';
+        state.thresholds = [
+            {
+                value: undefined,
+            },
+        ];
+        state.budgetManager = '';
+        state.selectedMonthlyBudgetAllocation = undefined;
+        state.budgetAppliedSameAmount = undefined;
+        state.initialAmount = undefined;
+        state.monthlyGrowthRate = undefined;
+        state.analyzedCostData = undefined;
+        state.budgetEachDate = [];
+    };
+
+    const getters = reactive({ });
+
+
+
+    return {
+        state,
+        getters,
+        ...mutations,
+        reset,
+    };
+});
diff --git a/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts b/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts
index b582f121a8..dd2331f8bb 100644
--- a/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts
+++ b/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts
@@ -43,11 +43,11 @@ export const useBudgetDetailPageStore = defineStore('page-budget-detail', {
                 ErrorHandler.handleRequestError(e, '');
             }
         },
-        async updateBudgetNotifications(params: { budgetId: string; notifications: BudgetModel['notifications'] }): Promise<void> {
+        async updateBudgetNotifications(params: BudgetSetNotificationParameters): Promise<void> {
             try {
                 this.budgetData = await SpaceConnector.clientV2.costAnalysis.budget.setNotification<BudgetSetNotificationParameters, BudgetModel>({
-                    notifications: params.notifications,
-                    budget_id: params.budgetId,
+                    notification: params.notification,
+                    budget_id: params.budget_id,
                 });
             } catch (e) {
                 ErrorHandler.handleRequestError(e, '');
diff --git a/apps/web/src/services/service-account/components/ServiceAccountBaseInformation.vue b/apps/web/src/services/service-account/components/ServiceAccountBaseInformation.vue
index a55bf1a1bd..7d0bdd968c 100644
--- a/apps/web/src/services/service-account/components/ServiceAccountBaseInformation.vue
+++ b/apps/web/src/services/service-account/components/ServiceAccountBaseInformation.vue
@@ -79,6 +79,7 @@ const updateServiceAccount = async () => {
         } else {
             await SpaceConnector.clientV2.identity.serviceAccount.update<ServiceAccountUpdateParameters, ServiceAccountModel>({
                 service_account_id: props.serviceAccountId ?? '',
+                service_account_mgr_id: state.baseInformationForm.serviceAccountManagerId,
                 name: state.baseInformationForm.accountName,
                 data: state.baseInformationForm.customSchemaForm,
                 tags: state.baseInformationForm.tags,
diff --git a/apps/web/src/services/service-account/components/ServiceAccountBaseInformationForm.vue b/apps/web/src/services/service-account/components/ServiceAccountBaseInformationForm.vue
index 514f1da856..212cc4898e 100644
--- a/apps/web/src/services/service-account/components/ServiceAccountBaseInformationForm.vue
+++ b/apps/web/src/services/service-account/components/ServiceAccountBaseInformationForm.vue
@@ -19,6 +19,7 @@ import { useUserStore } from '@/store/user/user-store';
 import TagsInput from '@/common/components/inputs/TagsInput.vue';
 import { useFormValidator } from '@/common/composables/form-validator';
 import type { Tag } from '@/common/modules/tags/type';
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
 
 import ServiceAccountProjectForm from '@/services/service-account/components/ServiceAccountProjectForm.vue';
 import { useServiceAccountPageStore } from '@/services/service-account/stores/service-account-page-store';
@@ -65,6 +66,7 @@ const state = reactive({
         accountName: state.originServiceAccountData?.name,
         customSchemaForm: state.originServiceAccountData?.data,
         tags: state.originServiceAccountData?.tags,
+        serviceAccountManagerId: state.originServiceAccountData?.service_account_mgr_id,
         ...((!serviceAccountPageGetters.isTrustedAccount && state.originServiceAccountData && ('project_id' in state.originServiceAccountData)) && {
             projectForm: { selectedProjectId: state.originServiceAccountData?.project_id ?? '' },
         }),
@@ -75,10 +77,12 @@ const state = reactive({
     tags: {},
     isTagsValid: true,
     projectForm: {} as ProjectForm,
+    serviceAccountManagerId: '',
     isProjectFormValid: false,
     formData: computed<BaseInformationForm>(() => ({
         accountName: serviceAccountName.value,
         customSchemaForm: state.customSchemaForm,
+        serviceAccountManagerId: state.serviceAccountManagerId,
         ...(!serviceAccountPageGetters.isTrustedAccount && { projectForm: state.projectForm }),
         tags: state.tags,
     })),
@@ -99,6 +103,7 @@ const initFormData = (originForm: Partial<BaseInformationForm>) => {
     // init validation
     state.isCustomSchemaFormValid = true;
     state.projectForm.selectedProjectId = originForm?.projectForm?.selectedProjectId;
+    state.serviceAccountManagerId = originForm?.serviceAccountManagerId;
 };
 
 /* Api */
@@ -127,6 +132,10 @@ const handleUpdateServiceAccountName = (value: string) => {
     setForm('serviceAccountName', value);
 };
 
+const handleServiceAccountManagerId = (value: string) => {
+    state.serviceAccountManagerId = value;
+};
+
 /* Init */
 (async () => {
     await listServiceAccounts();
@@ -166,6 +175,16 @@ watch(() => state.originForm, (originForm) => {
                 />
             </template>
         </p-field-group>
+        <p-field-group v-if="!serviceAccountPageGetters.isTrustedAccount"
+                       :label="$t('IDENTITY.SERVICE_ACCOUNT.ADD.SERVICE_ACCOUNT_MANAGER')"
+        >
+            <user-select-dropdown class="account-name block"
+                                  :show-user-group-list="false"
+                                  :selected-id="state.serviceAccountManagerId"
+                                  :placeholder="$t('IDENTITY.SERVICE_ACCOUNT.ADD.SERVICE_ACCOUNT_MANAGER')"
+                                  @update:selected-id="handleServiceAccountManagerId"
+            />
+        </p-field-group>
         <p-json-schema-form v-if="props.schema"
                             class="p-json-schema-form"
                             :form-data.sync="state.customSchemaForm"
@@ -212,6 +231,12 @@ watch(() => state.originForm, (originForm) => {
         margin-bottom: 1.5rem;
     }
 
+    /* custom design-system component - p-select-dropdown */
+    :deep(.dropdown-button-component) {
+        max-width: 30rem;
+        width: 100%;
+    }
+
     /* custom design-system component - p-json-schema-form */
     :deep(.p-json-schema-form) {
         .p-field-group {
diff --git a/apps/web/src/services/service-account/helpers/dynamic-ui-schema-generator/dynamic-layout-schema-template.ts b/apps/web/src/services/service-account/helpers/dynamic-ui-schema-generator/dynamic-layout-schema-template.ts
index 0ac811d4c6..d5e6d73848 100644
--- a/apps/web/src/services/service-account/helpers/dynamic-ui-schema-generator/dynamic-layout-schema-template.ts
+++ b/apps/web/src/services/service-account/helpers/dynamic-ui-schema-generator/dynamic-layout-schema-template.ts
@@ -53,6 +53,11 @@ export const getDefaultDetailSchema = (fields: DynamicField[], options: {
                 type: 'text',
             })),
             ...((!options.isTrustedAccount && [
+                {
+                    key: 'service_account_mgr_id',
+                    name: 'Service Account Manager',
+                    type: 'text',
+                },
                 {
                     key: 'state',
                     name: 'State',
@@ -160,6 +165,11 @@ export const getDefaultTableSchema = (dynamicFields: DynamicField[], options: {
                         reference_key: 'project_id',
                     },
                 },
+                {
+                    key: 'service_account_mgr_id',
+                    name: 'Service Account Manager',
+                    type: 'text',
+                },
                 {
                     key: 'state',
                     name: 'State',
diff --git a/apps/web/src/services/service-account/pages/ServiceAccountAddPage.vue b/apps/web/src/services/service-account/pages/ServiceAccountAddPage.vue
index 280b72cf22..74e86cb2f6 100644
--- a/apps/web/src/services/service-account/pages/ServiceAccountAddPage.vue
+++ b/apps/web/src/services/service-account/pages/ServiceAccountAddPage.vue
@@ -147,6 +147,7 @@ const createAccount = async (): Promise<string|undefined> => {
                 secret_schema_id: formState.credentialForm?.selectedSecretSchema?.schema_id,
                 secret_data: secretData,
                 tags: formState.baseInformationForm.tags,
+                service_account_mgr_id: formState.baseInformationForm.serviceAccountManagerId,
                 trusted_account_id: attachedTrustedAccountId,
                 project_id: formState.baseInformationForm.projectForm?.selectedProjectId ?? '',
             });
diff --git a/apps/web/src/services/service-account/types/service-account-page-type.ts b/apps/web/src/services/service-account/types/service-account-page-type.ts
index 0b5f5b4497..e46b826db0 100644
--- a/apps/web/src/services/service-account/types/service-account-page-type.ts
+++ b/apps/web/src/services/service-account/types/service-account-page-type.ts
@@ -8,6 +8,7 @@ export type PageMode = 'CREATE' | 'UPDATE' | 'READ';
 export interface BaseInformationForm {
     accountName: string;
     customSchemaForm: { [key: string]: any; };
+    serviceAccountManagerId?: string;
     tags: Tag;
     projectForm?: ProjectForm;
 }
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index d3342dcbdb..f4e05e5cbe 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -10059,6 +10059,137 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <folder_node>
+                                                <name>BASE_INFORMATION</name>
+                                                <children>
+                                                    <concept_node>
+                                                        <name>BUDGET_ALERTS_TEXT</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>EDIT</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>NAME_INVALID_TEXT</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>SERVICE_ACCOUNT_MANAGERS</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>TITLE</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>UPDATE_SUCCESS</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                </children>
+                                            </folder_node>
                                             <concept_node>
                                                 <name>BUDGETED</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -10227,6 +10358,137 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <folder_node>
+                                                <name>BUDGET_USAGE_TREND</name>
+                                                <children>
+                                                    <concept_node>
+                                                        <name>ACCUMULATED_USAGE</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>ACTUAL_SPEND</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>BUDGET_REMAINING</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>PLANNED_BUDGET</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>TITLE</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>USAGE_RATE</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>
                                             <concept_node>
                                                 <name>CONDITION</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -10269,6 +10531,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>DELETE</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_MODAL_TITLE</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -10290,6 +10573,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>DELETE_SUCCESS</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>DETAILS</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -10463,6 +10767,27 @@
                                                     </concept_node>
                                                 </children>
                                             </folder_node>
+                                            <concept_node>
+                                                <name>GO_TO_COST_ANALYSIS</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>LABEL_START_END_MONTH</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -10551,7 +10876,7 @@
                                                         </translations>
                                                     </concept_node>
                                                     <concept_node>
-                                                        <name>BUDGET_NOTI_HELP_TEXT</name>
+                                                        <name>BUDGET_ALERT_MODAL_DESC1</name>
                                                         <definition_loaded>false</definition_loaded>
                                                         <description/>
                                                         <comment/>
@@ -10563,16 +10888,16 @@
                                                             </translation>
                                                             <translation>
                                                                 <language>ja-JP</language>
-                                                                <approved>true</approved>
+                                                                <approved>false</approved>
                                                             </translation>
                                                             <translation>
                                                                 <language>ko-KR</language>
-                                                                <approved>true</approved>
+                                                                <approved>false</approved>
                                                             </translation>
                                                         </translations>
                                                     </concept_node>
                                                     <concept_node>
-                                                        <name>BUDGET_USAGE</name>
+                                                        <name>BUDGET_ALERT_MODAL_DESC2</name>
                                                         <definition_loaded>false</definition_loaded>
                                                         <description/>
                                                         <comment/>
@@ -10584,16 +10909,16 @@
                                                             </translation>
                                                             <translation>
                                                                 <language>ja-JP</language>
-                                                                <approved>true</approved>
+                                                                <approved>false</approved>
                                                             </translation>
                                                             <translation>
                                                                 <language>ko-KR</language>
-                                                                <approved>true</approved>
+                                                                <approved>false</approved>
                                                             </translation>
                                                         </translations>
                                                     </concept_node>
                                                     <concept_node>
-                                                        <name>CRITICAL</name>
+                                                        <name>BUDGET_NAME</name>
                                                         <definition_loaded>false</definition_loaded>
                                                         <description/>
                                                         <comment/>
@@ -10614,7 +10939,7 @@
                                                         </translations>
                                                     </concept_node>
                                                     <concept_node>
-                                                        <name>SET_BUDGET_NOTIFICATIONS</name>
+                                                        <name>BUDGET_NOTI_HELP_TEXT</name>
                                                         <definition_loaded>false</definition_loaded>
                                                         <description/>
                                                         <comment/>
@@ -10622,20 +10947,20 @@
                                                         <translations>
                                                             <translation>
                                                                 <language>en-US</language>
-                                                                <approved>false</approved>
+                                                                <approved>true</approved>
                                                             </translation>
                                                             <translation>
                                                                 <language>ja-JP</language>
-                                                                <approved>false</approved>
+                                                                <approved>true</approved>
                                                             </translation>
                                                             <translation>
                                                                 <language>ko-KR</language>
-                                                                <approved>false</approved>
+                                                                <approved>true</approved>
                                                             </translation>
                                                         </translations>
                                                     </concept_node>
                                                     <concept_node>
-                                                        <name>SPECIFIC_USER</name>
+                                                        <name>BUDGET_USAGE</name>
                                                         <definition_loaded>false</definition_loaded>
                                                         <description/>
                                                         <comment/>
@@ -10656,7 +10981,7 @@
                                                         </translations>
                                                     </concept_node>
                                                     <concept_node>
-                                                        <name>THRESHOLD</name>
+                                                        <name>CANCEL</name>
                                                         <definition_loaded>false</definition_loaded>
                                                         <description/>
                                                         <comment/>
@@ -10677,7 +11002,7 @@
                                                         </translations>
                                                     </concept_node>
                                                     <concept_node>
-                                                        <name>TYPE</name>
+                                                        <name>CRITICAL</name>
                                                         <definition_loaded>false</definition_loaded>
                                                         <description/>
                                                         <comment/>
@@ -10698,7 +11023,7 @@
                                                         </translations>
                                                     </concept_node>
                                                     <concept_node>
-                                                        <name>UNIT</name>
+                                                        <name>SAVE_CHANGES</name>
                                                         <definition_loaded>false</definition_loaded>
                                                         <description/>
                                                         <comment/>
@@ -10719,7 +11044,133 @@
                                                         </translations>
                                                     </concept_node>
                                                     <concept_node>
-                                                        <name>USER</name>
+                                                        <name>SET_BUDGET_NOTIFICATIONS</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>SPECIFIC_USER</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>THRESHOLD</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>TYPE</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>UNIT</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>UPDATE_BUDGET_ALERT</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>USER</name>
                                                         <definition_loaded>false</definition_loaded>
                                                         <description/>
                                                         <comment/>
@@ -10804,6 +11255,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>NAME_EDIT_SUCCESS</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>NOTIFICATIONS_CHANNEL</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -10909,6 +11381,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>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>SET</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -10993,6 +11486,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>TOTAL_BUDGET</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>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>ko-KR</language>
+                                                        <approved>true</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>TOTAL_BUDGETED_AMOUNT</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -11827,6 +12341,32 @@
                                                     </concept_node>
                                                 </children>
                                             </folder_node>
+                                            <folder_node>
+                                                <name>BUDGET_DETAILS</name>
+                                                <children>
+                                                    <concept_node>
+                                                        <name>TITLE</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                </children>
+                                            </folder_node>
                                             <concept_node>
                                                 <name>CANCEL</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -11869,6 +12409,1549 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <folder_node>
+                                                <name>CREATE</name>
+                                                <children>
+                                                    <concept_node>
+                                                        <name>ADDITIONAL_RECIPIENTS</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>ADD_RECIPIENTS_TEXT</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>ADD_THRESHOLD</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>ALERT_RECIPIENTS</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>AMOUNT_EACH_MONTH</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>APPLY_THE_SAME_AMOUNT</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>BASE_FOR_PERIOD_FILTER</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>BUDGET_AMOUNT</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>BUDGET_CYCLE</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>BUDGET_CYCLE_DESCRIPTION</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>BUDGET_MANAGER</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>BUDGET_MANAGER_DESCRIPTION</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>CANCEL</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>CONTINUE</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>CURRENCY</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>DEFAULT</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>EDIT_BUDGET_MANAGER</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>END_MONTH</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>ENTER_MANUALLY</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>EXCEEDS_AMOUNT</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>EXCEEDS_AMOUNT_DESCRIPTION</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>EXCHANGE_RATE_SOURCE</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>FIXED_TERM</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>INCRASE_BY_SPECIFIC_PERCENTAGE</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>INITIAL_AMOUNT</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>LAST_COST_TREND</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>MONTHLY</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>MONTHLY_BUDGET_ALLOCATION</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>MONTHLY_GROWTH_RATE</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>OTHERS</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>PREVIOUS</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</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_DUPLICATED_WARNING1</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>PROJECT_DUPLICATED_WARNING2</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>PROJECT_MEMBER</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_VALIDATION</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>REQUIRED_NAME</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>RESET_DATE</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>SCOPE</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>SELECT_MONTH</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>SERVICE_ACCOUNT</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>SERVICE_ACCOUNT_MANAGERS</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>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>SET</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>SET_ALERT_THRESHOLD</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>SET_BUDGET_ALERTS</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>SHOW_THE_LIST</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>SKIP_FOR_LATER</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>START_MONTH</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>STEP</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>STEP1_DESC</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>STEP2_DESCRIPTION</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>STEP3_DESCRIPTION</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>THRESHOLD_INVALID_TEXT</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>WORKSPACE_OWNERS</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>
+                                            <concept_node>
+                                                <name>CREATE_BUDGET</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_BUDGET</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>UPDATE_BUDGET</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>
+                                    <folder_node>
+                                        <name>MAIN</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>ACTIVE_TIL_DATE</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>ALL</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>AMOUNT_PAID</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>AMOUNT_SPENT</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>AMOUNT_USED</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>ASC</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>BUDGET</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>BUDGETED</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>BUDGET_CYCLE</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>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>ko-KR</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>BUDGET_DELETE_DESC</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>BUDGET_EXCEEDED</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>BUDGET_NAME</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>BUDGET_SPENT_USAGE</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>BUDGET_STATUS</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>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>ko-KR</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>COST_TYPE</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>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>CREATE_BUDGET</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -11891,7 +13974,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>DELETE_BUDGET</name>
+                                                <name>CUSTOM</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -11912,7 +13995,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>UPDATE_BUDGET</name>
+                                                <name>DATA_SOURCE</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -11932,13 +14015,8 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
-                                        </children>
-                                    </folder_node>
-                                    <folder_node>
-                                        <name>MAIN</name>
-                                        <children>
                                             <concept_node>
-                                                <name>AMOUNT_PAID</name>
+                                                <name>DELETE</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -11959,7 +14037,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>AMOUNT_SPENT</name>
+                                                <name>DELETE_SUCCESS</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -11980,7 +14058,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>AMOUNT_USED</name>
+                                                <name>DESC</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -12001,7 +14079,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>ASC</name>
+                                                <name>EDIT</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -12022,7 +14100,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>BUDGET</name>
+                                                <name>EXCEEDED</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -12043,7 +14121,28 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>BUDGETED</name>
+                                                <name>EXCEEDED_BUDGET</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>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>ko-KR</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>EXPIRED</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -12064,7 +14163,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>BUDGET_NAME</name>
+                                                <name>FILTER</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -12085,7 +14184,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>COST_TYPE</name>
+                                                <name>FIXED_TERM</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -12106,7 +14205,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>CREATE</name>
+                                                <name>HIDE_EXPIRED_BUDGETS</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -12127,7 +14226,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>CREATE_BUDGET</name>
+                                                <name>LAST_12_MONTHS</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -12148,7 +14247,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>DATA_SOURCE</name>
+                                                <name>LAST_3_MONTHS</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -12169,7 +14268,49 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>DESC</name>
+                                                <name>LAST_6_MONTHS</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>LAST_MONTH</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>LAST_YEAR</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -12210,6 +14351,48 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>MONTH</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>MONTHLY</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>NO_BUDGET</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -12273,6 +14456,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>PROJECT</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>PROVIDER</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -12294,6 +14498,69 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>REMAINED</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>SELECT_MONTH</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>SERVICE_ACCOUNT</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>SINGLE_BUDGET</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -12336,6 +14603,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>THIS_YEAR</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>TOTAL</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -62931,6 +65219,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>SERVICE_ACCOUNT_MANAGER</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>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ko-KR</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>TAB_INPUT</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index a6c0e989c0..994e03afd5 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -530,6 +530,14 @@
 				"DETAIL": {
 					"ACTUAL_COST": "Actual Cost",
 					"AMOUNT_PLANNING_TYPE": "Amount Planning Type",
+					"BASE_INFORMATION": {
+						"BUDGET_ALERTS_TEXT": "Notify budget managers when actual spending exceeds",
+						"EDIT": "Edit",
+						"NAME_INVALID_TEXT": "The name is either missing or already in use.",
+						"SERVICE_ACCOUNT_MANAGERS": "Service Account Managers",
+						"TITLE": "Base Information",
+						"UPDATE_SUCCESS": "{data} successfully updated"
+					},
 					"BUDGETED": "Budgeted",
 					"BUDGET_NOTIFICATIONS": "Budget Notifications",
 					"BUDGET_NOTIFICATIONS_DESC": "Set budget notifications if you want to send notifications when the cost exceeds the budget",
@@ -538,9 +546,19 @@
 					"BUDGET_NOTI_HELP_TEXT_2": "Budget Notifications Message will be sent to the notifications channels below.",
 					"BUDGET_SPENT": "Budget Spent",
 					"BUDGET_SUMMARY": "Budget Summary",
+					"BUDGET_USAGE_TREND": {
+						"ACCUMULATED_USAGE": "Accumulated Usage",
+						"ACTUAL_SPEND": "Actual Spend",
+						"BUDGET_REMAINING": "Remaining Budget",
+						"PLANNED_BUDGET": "Planned Budget",
+						"TITLE": "Budget Usage Trend",
+						"USAGE_RATE": "Usage Rate"
+					},
 					"CONDITION": "Condition",
 					"COST_TYPE": "Cost Type",
+					"DELETE": "Delete",
 					"DELETE_MODAL_TITLE": "Are you sure you want to delete the budget notifications?",
+					"DELETE_SUCCESS": "Budget successfully deleted.",
 					"DETAILS": "Details",
 					"FIELD": {
 						"ACTUAL_COST": "Actual Cost",
@@ -551,33 +569,43 @@
 						"NOTIFICATIONS_LEVEL": "Notifications Level",
 						"SCHEDULE": "Schedule"
 					},
+					"GO_TO_COST_ANALYSIS": "Go to Cost Analysis",
 					"LABEL_START_END_MONTH": "Start ~ End Months",
 					"MODAL": {
 						"ACTUAL_COST": "Actual Cost",
 						"ADD_CONDITION": "Add Condition",
 						"ALL_MEMBER": "All Members in Service",
+						"BUDGET_ALERT_MODAL_DESC1": "Do you really want to turn off the Budget Alert?",
+						"BUDGET_ALERT_MODAL_DESC2": "Do you really want to turn on the Budget Alert?",
+						"BUDGET_NAME": "Budget Name",
 						"BUDGET_NOTI_HELP_TEXT": "When any of the following conditions are met, the notification will be sent.",
 						"BUDGET_USAGE": "{symbol} of Budget",
+						"CANCEL": "Cancel",
 						"CRITICAL": "Critical",
+						"SAVE_CHANGES": "Save Changes",
 						"SET_BUDGET_NOTIFICATIONS": "Set Budget Notifications",
 						"SPECIFIC_USER": "Specific User",
 						"THRESHOLD": "Threshold",
 						"TYPE": "Type",
 						"UNIT": "Unit",
+						"UPDATE_BUDGET_ALERT": "Update Budget Alert",
 						"USER": "User",
 						"USER_GROUP": "User Group",
 						"WARNING": "Warning"
 					},
 					"MONTHLY_PLANNING": "Monthly Planning",
+					"NAME_EDIT_SUCCESS": "Budget name updated successfully",
 					"NOTIFICATIONS_CHANNEL": "Notifications Channel",
 					"ORIGINAL_DATA": "Original Data",
 					"PAGE_NOTIFICATION": "This budget’s settings can only be changed in admin mode.",
 					"PERIOD": "Period",
 					"PROVIDER": "Provider",
+					"RENAME": "Rename",
 					"SET": "Set",
 					"SET_NOTIFICATION_CHANNEL": "Set Notifications Channel",
 					"TARGET": "Target",
 					"TOTAL_AMOUNT": "Total Amount",
+					"TOTAL_BUDGET": "Total Budget",
 					"TOTAL_BUDGETED_AMOUNT": "Total Budgeted Amount (Period)",
 					"VIEW_ALL": "View All",
 					"VIEW_IN_ADMIN_MODE": "View in Admin Mode"
@@ -623,32 +651,120 @@
 						"SPECIFIC_PROVIDER": "Specific Provider",
 						"WORKSPACE": "Workspace"
 					},
+					"BUDGET_DETAILS": {
+						"TITLE": "Budget Details"
+					},
 					"CANCEL": "Cancel",
 					"CONFIRM": "Confirm",
+					"CREATE": {
+						"ADDITIONAL_RECIPIENTS": "Additional Recipients",
+						"ADD_RECIPIENTS_TEXT": "Alerts are always delivered to the Budget Manager, in addition to other recipients:",
+						"ADD_THRESHOLD": "Add Threshold",
+						"ALERT_RECIPIENTS": "Alert Recipients",
+						"AMOUNT_EACH_MONTH": "Amount Each Month",
+						"APPLY_THE_SAME_AMOUNT": "Apply the same amount each month",
+						"BASE_FOR_PERIOD_FILTER": "Base for 'period' filter",
+						"BUDGET_AMOUNT": "Budget Amount",
+						"BUDGET_CYCLE": "Budget Cycle",
+						"BUDGET_CYCLE_DESCRIPTION": "Set the start and end months above before proceeding.",
+						"BUDGET_MANAGER": "Budget Manager",
+						"BUDGET_MANAGER_DESCRIPTION": "Budget managers will receive notifications if alerts are enabled.",
+						"CANCEL": "Cancel",
+						"CONTINUE": "Continue",
+						"CURRENCY": "Currency",
+						"DEFAULT": "Default",
+						"EDIT_BUDGET_MANAGER": "Edit Budget Manager",
+						"END_MONTH": "End Month",
+						"ENTER_MANUALLY": "Enter Manually",
+						"EXCEEDS_AMOUNT": "Exceeds amount",
+						"EXCEEDS_AMOUNT_DESCRIPTION": "Enter the amount that will trigger an alert when actual spending exceeds it.",
+						"EXCHANGE_RATE_SOURCE": "Exchange Rate Source",
+						"FIXED_TERM": "Fixed term",
+						"INCRASE_BY_SPECIFIC_PERCENTAGE": "Increase by a specific % each month",
+						"INITIAL_AMOUNT": "Initial Amount",
+						"LAST_COST_TREND": "Last {count} Month Cost Trend",
+						"MONTHLY": "Monthly",
+						"MONTHLY_BUDGET_ALLOCATION": "Monthly Budget Allocation",
+						"MONTHLY_GROWTH_RATE": "Monthly Growth Rate",
+						"OTHERS": "Others",
+						"PREVIOUS": "Previous",
+						"PROJECT": "Project",
+						"PROJECT_DUPLICATED_WARNING1": "{project} already has Budget Year of {year_list}",
+						"PROJECT_DUPLICATED_WARNING2": "{project} of {serviceAccount} already has Budget Year of {year_list}",
+						"PROJECT_MEMBER": "Project Member",
+						"PROJECT_VALIDATION": "The project is already in use.",
+						"REQUIRED_NAME": "Please enter name.",
+						"RESET_DATE": "",
+						"SCOPE": "Scope",
+						"SELECT_MONTH": "Select Month",
+						"SERVICE_ACCOUNT": "Service Account",
+						"SERVICE_ACCOUNT_MANAGERS": "Service Account Managers",
+						"SET": "Set",
+						"SET_ALERT_THRESHOLD": "Set Alert Threshold",
+						"SET_BUDGET_ALERTS": "Set Budget Alerts",
+						"SHOW_THE_LIST": "Show the List",
+						"SKIP_FOR_LATER": "Skip for Later",
+						"START_MONTH": "Start Month",
+						"STEP": "Step",
+						"STEP1_DESC": "Set up a budget easily to track and manage your spending.",
+						"STEP2_DESCRIPTION": "Create a budget by setting the currency and budget cycle.",
+						"STEP3_DESCRIPTION": "Receive alerts when ‘Actual Spend’ exceeds the threshold.",
+						"THRESHOLD_INVALID_TEXT": "Alert Threshold is required.",
+						"WORKSPACE_OWNERS": "Workspace Owners"
+					},
 					"CREATE_BUDGET": "Create Budget",
 					"DELETE_BUDGET": "Delete Budget",
 					"UPDATE_BUDGET": "Update Budget"
 				},
 				"MAIN": {
+					"ACTIVE_TIL_DATE": "Active",
+					"ALL": "All",
 					"AMOUNT_PAID": "Budget Usage Rate({symbol})",
 					"AMOUNT_SPENT": "Amount Spent",
-					"AMOUNT_USED": "Budget Usage Amount{symbol})",
+					"AMOUNT_USED": "Budget Usage Amount({symbol})",
 					"ASC": "Asc",
 					"BUDGET": "Budget",
 					"BUDGETED": "Budgeted",
+					"BUDGET_CYCLE": "Budget Cycle",
+					"BUDGET_DELETE_DESC": "Do you really want to delete the selected budget(s)?",
+					"BUDGET_EXCEEDED": "Budget Exceeded",
 					"BUDGET_NAME": "Budget Name",
+					"BUDGET_SPENT_USAGE": "Over {percent}% Spent",
+					"BUDGET_STATUS": "Budget Status",
 					"COST_TYPE": "Cost Type",
 					"CREATE": "Create",
 					"CREATE_BUDGET": "Create Budget",
+					"CUSTOM": "Custom",
 					"DATA_SOURCE": "Data Source",
+					"DELETE": "Delete",
+					"DELETE_SUCCESS": "The selected budget(s) deleted.",
 					"DESC": "Desc",
+					"EDIT": "Edit",
+					"EXCEEDED": "exceeded",
+					"EXCEEDED_BUDGET": "Exceeded Budget",
+					"EXPIRED": "EXPIRED",
+					"FILTER": "Filter",
+					"FIXED_TERM": "Fixed Term",
+					"HIDE_EXPIRED_BUDGETS": "Hide EXPIRED Budgets",
+					"LAST_12_MONTHS": "Last 12 Months",
+					"LAST_3_MONTHS": "Last 3 Months",
+					"LAST_6_MONTHS": "Last 6 Months",
+					"LAST_MONTH": "Last Month",
+					"LAST_YEAR": "Last Year",
 					"MANAGED_BY_ADMIN": "Managed by admins",
+					"MONTH": "Month",
+					"MONTHLY": "Monthly",
 					"NO_BUDGET": "No Budget",
 					"OVERSPENT": "Overspent",
 					"PERIOD": "Period",
+					"PROJECT": "Project",
 					"PROVIDER": "Provider",
+					"REMAINED": "remained",
+					"SELECT_MONTH": "Select Month",
+					"SERVICE_ACCOUNT": "Service Account",
 					"SINGLE_BUDGET": "Single Budget",
 					"THIS_MONTH": "This Month",
+					"THIS_YEAR": "This Year",
 					"TOTAL": "Total",
 					"UPDATE_BUDGET": "Update Budget",
 					"USAGE": "Budget Usage Rate({symbol})"
@@ -3438,6 +3554,7 @@
 				"SECRET_TYPE_LABEL": "Secret Type",
 				"SEE_MORE": "See more",
 				"SERVICE_ACCOUNT": "Service Account",
+				"SERVICE_ACCOUNT_MANAGER": "Service Account Manager",
 				"TAB_INPUT": "Input Form",
 				"TAB_JSON": "Json Code",
 				"TAG_ADD": "Add Tag",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index c6cb027931..44ed907f47 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -530,6 +530,14 @@
 				"DETAIL": {
 					"ACTUAL_COST": "費用",
 					"AMOUNT_PLANNING_TYPE": "予算設定タイプ",
+					"BASE_INFORMATION": {
+						"BUDGET_ALERTS_TEXT": "実際の支出が超過した場合に予算管理者へ通知",
+						"EDIT": "編集",
+						"NAME_INVALID_TEXT": "名前が入力されていないか、すでに使用されています。",
+						"SERVICE_ACCOUNT_MANAGERS": "サービスアカウント管理者",
+						"TITLE": "基本情報",
+						"UPDATE_SUCCESS": "{data} が正常に更新されました"
+					},
 					"BUDGETED": "予算",
 					"BUDGET_NOTIFICATIONS": "予算に関するお知らせ",
 					"BUDGET_NOTIFICATIONS_DESC": "費用が予算の一定金額を超えた場合、自動通知されるように通知基準を設定できます。",
@@ -538,9 +546,19 @@
 					"BUDGET_NOTI_HELP_TEXT_2": "以下の通知チャネルに予算通知メッセージが配信されます",
 					"BUDGET_SPENT": "予算使用率",
 					"BUDGET_SUMMARY": "予算概要",
+					"BUDGET_USAGE_TREND": {
+						"ACCUMULATED_USAGE": "累積使用量",
+						"ACTUAL_SPEND": "実際の支出",
+						"BUDGET_REMAINING": "残りの予算",
+						"PLANNED_BUDGET": "計画予算",
+						"TITLE": "予算使用傾向",
+						"USAGE_RATE": "使用率"
+					},
 					"CONDITION": "条件",
 					"COST_TYPE": "コストタイプ",
+					"DELETE": "削除",
 					"DELETE_MODAL_TITLE": "予算に関する通知設定を削除しますか？",
+					"DELETE_SUCCESS": "予算が正常に削除されました",
 					"DETAILS": "詳細情報",
 					"FIELD": {
 						"ACTUAL_COST": "費用",
@@ -551,33 +569,43 @@
 						"NOTIFICATIONS_LEVEL": "通知レベル",
 						"SCHEDULE": "通知スケジュール"
 					},
+					"GO_TO_COST_ANALYSIS": "コスト分析に移動",
 					"LABEL_START_END_MONTH": "開始-終了月",
 					"MODAL": {
 						"ACTUAL_COST": "費用",
 						"ADD_CONDITION": "条件追加",
 						"ALL_MEMBER": "サービス内のすべてのメンバー",
+						"BUDGET_ALERT_MODAL_DESC1": "",
+						"BUDGET_ALERT_MODAL_DESC2": "",
+						"BUDGET_NAME": "予算名",
 						"BUDGET_NOTI_HELP_TEXT": "次の条件のいずれかが満たされると、通知が送信されます",
 						"BUDGET_USAGE": "予算金額の {symbol} 使用",
+						"CANCEL": "取消",
 						"CRITICAL": "警告",
+						"SAVE_CHANGES": "変更事項保存",
 						"SET_BUDGET_NOTIFICATIONS": "予算通知の設定",
 						"SPECIFIC_USER": "特定のメンバー",
 						"THRESHOLD": "閾値",
 						"TYPE": "タイプ",
 						"UNIT": "ユニット",
+						"UPDATE_BUDGET_ALERT": "",
 						"USER": "ユーザー",
 						"USER_GROUP": "ユーザーグループ",
 						"WARNING": "警告"
 					},
 					"MONTHLY_PLANNING": "月別予算計画",
+					"NAME_EDIT_SUCCESS": "予算名が正常に更新されました",
 					"NOTIFICATIONS_CHANNEL": "通知チャネル",
 					"ORIGINAL_DATA": "原本データー",
 					"PAGE_NOTIFICATION": "この予算の設定は管理者モードでのみ変更できます。",
 					"PERIOD": "期間",
 					"PROVIDER": "プロバイダー",
+					"RENAME": "名前を変更",
 					"SET": "設定",
 					"SET_NOTIFICATION_CHANNEL": "通知チャネルの設定",
 					"TARGET": "ターゲット",
 					"TOTAL_AMOUNT": "総予算計画",
+					"TOTAL_BUDGET": "総予算",
 					"TOTAL_BUDGETED_AMOUNT": "総予算(期間）合計",
 					"VIEW_ALL": "すべて表示",
 					"VIEW_IN_ADMIN_MODE": "管理者モードで確認"
@@ -623,32 +651,120 @@
 						"SPECIFIC_PROVIDER": "特定プロバイダ",
 						"WORKSPACE": "ワークスペース"
 					},
+					"BUDGET_DETAILS": {
+						"TITLE": ""
+					},
 					"CANCEL": "取消",
 					"CONFIRM": "確認",
+					"CREATE": {
+						"ADDITIONAL_RECIPIENTS": "追加の受信者",
+						"ADD_RECIPIENTS_TEXT": "他の受信者に加えて、アラートは常に予算管理者に送信されます:",
+						"ADD_THRESHOLD": "閾値を追加",
+						"ALERT_RECIPIENTS": "アラートの受信者",
+						"AMOUNT_EACH_MONTH": "",
+						"APPLY_THE_SAME_AMOUNT": "",
+						"BASE_FOR_PERIOD_FILTER": "",
+						"BUDGET_AMOUNT": "",
+						"BUDGET_CYCLE": "予算サイクル",
+						"BUDGET_CYCLE_DESCRIPTION": "まず上のセクションで開始月と終了月を設定してください。",
+						"BUDGET_MANAGER": "予算管理者",
+						"BUDGET_MANAGER_DESCRIPTION": "アラートが有効な場合、予算管理者に通知が届きます。",
+						"CANCEL": "取消",
+						"CONTINUE": "次へ",
+						"CURRENCY": "通貨",
+						"DEFAULT": "デフォルト",
+						"EDIT_BUDGET_MANAGER": "予算管理者を編集",
+						"END_MONTH": "終了月",
+						"ENTER_MANUALLY": "",
+						"EXCEEDS_AMOUNT": "アラート基準額",
+						"EXCEEDS_AMOUNT_DESCRIPTION": "実際の支出が基準を超えた際に通知される金額を入力してください。",
+						"EXCHANGE_RATE_SOURCE": "為替基準",
+						"FIXED_TERM": "固定期間",
+						"INCRASE_BY_SPECIFIC_PERCENTAGE": "",
+						"INITIAL_AMOUNT": "",
+						"LAST_COST_TREND": "過去{count}か月のコスト推移",
+						"MONTHLY": "月次",
+						"MONTHLY_BUDGET_ALLOCATION": "",
+						"MONTHLY_GROWTH_RATE": "",
+						"OTHERS": "その他",
+						"PREVIOUS": "前へ",
+						"PROJECT": "プロジェクト",
+						"PROJECT_DUPLICATED_WARNING1": "",
+						"PROJECT_DUPLICATED_WARNING2": "",
+						"PROJECT_MEMBER": "プロジェクトメンバー",
+						"PROJECT_VALIDATION": "",
+						"REQUIRED_NAME": "名前を入力してください",
+						"RESET_DATE": "",
+						"SCOPE": "スコープ",
+						"SELECT_MONTH": "月を選択",
+						"SERVICE_ACCOUNT": "サービスアカウント",
+						"SERVICE_ACCOUNT_MANAGERS": "",
+						"SET": "設定",
+						"SET_ALERT_THRESHOLD": "アラートのしきい値を設定",
+						"SET_BUDGET_ALERTS": "予算アラートを設定",
+						"SHOW_THE_LIST": "リストを表示",
+						"SKIP_FOR_LATER": "後で収集",
+						"START_MONTH": "開始月",
+						"STEP": "ステップ",
+						"STEP1_DESC": "支出を簡単に追跡・管理するために予算を設定しましょう。",
+						"STEP2_DESCRIPTION": "通貨と予算サイクルを設定して予算を作成します。",
+						"STEP3_DESCRIPTION": "実際の支出が閾値を超えた際にアラートを受け取ります。",
+						"THRESHOLD_INVALID_TEXT": "アラート基準額の入力が必要です。",
+						"WORKSPACE_OWNERS": "ワークスペースのオーナー"
+					},
 					"CREATE_BUDGET": "予算作成",
 					"DELETE_BUDGET": "予算削除",
 					"UPDATE_BUDGET": "予算の更新"
 				},
 				"MAIN": {
+					"ACTIVE_TIL_DATE": "アクティブ",
+					"ALL": "合計",
 					"AMOUNT_PAID": "使用料({symbol})",
 					"AMOUNT_SPENT": "使用金額",
 					"AMOUNT_USED": "使用金額({symbol})",
 					"ASC": "昇順",
 					"BUDGET": "予算",
 					"BUDGETED": "予算",
+					"BUDGET_CYCLE": "",
+					"BUDGET_DELETE_DESC": "選択した予算を本当に削除しますか？",
+					"BUDGET_EXCEEDED": "予算超過",
 					"BUDGET_NAME": "予算名",
+					"BUDGET_SPENT_USAGE": "{percent}% 以上使用",
+					"BUDGET_STATUS": "",
 					"COST_TYPE": "コストタイプ",
 					"CREATE": "予算作成",
 					"CREATE_BUDGET": "予算作成",
+					"CUSTOM": "カスタム",
 					"DATA_SOURCE": "データソース",
+					"DELETE": "削除",
+					"DELETE_SUCCESS": "選択した予算が削除されました",
 					"DESC": "降順",
+					"EDIT": "編集",
+					"EXCEEDED": "を超えています",
+					"EXCEEDED_BUDGET": "",
+					"EXPIRED": "期限切れ",
+					"FILTER": "フィルター",
+					"FIXED_TERM": "固定期間",
+					"HIDE_EXPIRED_BUDGETS": "期限切れの予算を非表示",
+					"LAST_12_MONTHS": "過去12ヶ月間",
+					"LAST_3_MONTHS": "過去3ヶ月間",
+					"LAST_6_MONTHS": "過去6ヶ月間",
+					"LAST_MONTH": "直近の月",
+					"LAST_YEAR": "昨年",
 					"MANAGED_BY_ADMIN": "管理者管理",
+					"MONTH": "月",
+					"MONTHLY": "月次",
 					"NO_BUDGET": "予算なし",
 					"OVERSPENT": "予算超過",
 					"PERIOD": "期間",
+					"PROJECT": "プロジェクト",
 					"PROVIDER": "プロバイダー",
+					"REMAINED": "残り",
+					"SELECT_MONTH": "月を選択",
+					"SERVICE_ACCOUNT": "サービスアカウント",
 					"SINGLE_BUDGET": "単一予算",
 					"THIS_MONTH": "今月",
+					"THIS_YEAR": "本年",
 					"TOTAL": "合計",
 					"UPDATE_BUDGET": "予算修正",
 					"USAGE": "使用料({symbol})"
@@ -3438,6 +3554,7 @@
 				"SECRET_TYPE_LABEL": "暗号化キーのタイプ",
 				"SEE_MORE": "詳細はこちら",
 				"SERVICE_ACCOUNT": "サービスアカウント",
+				"SERVICE_ACCOUNT_MANAGER": "",
 				"TAB_INPUT": "直接入力",
 				"TAB_JSON": "JSONで入力",
 				"TAG_ADD": "タグ追加",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 8719fa9512..bd2c89d697 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -530,6 +530,14 @@
 				"DETAIL": {
 					"ACTUAL_COST": "실 사용액",
 					"AMOUNT_PLANNING_TYPE": "예산 설정 타입",
+					"BASE_INFORMATION": {
+						"BUDGET_ALERTS_TEXT": "실제 지출이 초과되면 예산 관리자에게 알림 전송",
+						"EDIT": "편집",
+						"NAME_INVALID_TEXT": "이름을 입력하지 않았거나, 이미 존재하는 이름입니다.",
+						"SERVICE_ACCOUNT_MANAGERS": "서비스 어카운트 관리자",
+						"TITLE": "기본 정보",
+						"UPDATE_SUCCESS": "{data} 이(가) 성공적으로 업데이트되었습니다."
+					},
 					"BUDGETED": "예산",
 					"BUDGET_NOTIFICATIONS": "예산 사용 알림 설정",
 					"BUDGET_NOTIFICATIONS_DESC": "비용이 예산의 일정 금액을 초과할 경우, 자동 알림을 받을 수 있도록 알림 기준을 설정하세요.",
@@ -538,9 +546,19 @@
 					"BUDGET_NOTI_HELP_TEXT_2": "아래 알림 채널로 예산 알림 메세지가 발송됩니다.",
 					"BUDGET_SPENT": "예산 사용률",
 					"BUDGET_SUMMARY": "예산 요약",
+					"BUDGET_USAGE_TREND": {
+						"ACCUMULATED_USAGE": "누적 사용량",
+						"ACTUAL_SPEND": "실제 지출",
+						"BUDGET_REMAINING": "남은 예산",
+						"PLANNED_BUDGET": "계획된 예산",
+						"TITLE": "예산 사용 추이",
+						"USAGE_RATE": "사용률"
+					},
 					"CONDITION": "알림 기준",
 					"COST_TYPE": "비용 발생 기준",
+					"DELETE": "삭제",
 					"DELETE_MODAL_TITLE": "예산 사용 알림 설정을 삭제하시겠습니까?",
+					"DELETE_SUCCESS": "예산 삭제 완료",
 					"DETAILS": "상세 정보",
 					"FIELD": {
 						"ACTUAL_COST": "실 사용액",
@@ -551,33 +569,43 @@
 						"NOTIFICATIONS_LEVEL": "알림 레벨",
 						"SCHEDULE": "알림 예정일"
 					},
+					"GO_TO_COST_ANALYSIS": "비용 분석으로 이동",
 					"LABEL_START_END_MONTH": "시작 ~ 종료 월",
 					"MODAL": {
 						"ACTUAL_COST": "실 사용액",
 						"ADD_CONDITION": "알림 기준 추가",
 						"ALL_MEMBER": "이 서비스의 모든 멤버",
+						"BUDGET_ALERT_MODAL_DESC1": "",
+						"BUDGET_ALERT_MODAL_DESC2": "",
+						"BUDGET_NAME": "예산명",
 						"BUDGET_NOTI_HELP_TEXT": "다음 경우에 알림을 발송합니다.",
 						"BUDGET_USAGE": "예산금액의 {symbol} 사용",
+						"CANCEL": "취소",
 						"CRITICAL": "위험 경고",
+						"SAVE_CHANGES": "변경사항 저장",
 						"SET_BUDGET_NOTIFICATIONS": "예산 알림 설정",
 						"SPECIFIC_USER": "특정 유저",
 						"THRESHOLD": "한계값",
 						"TYPE": "알림선택",
 						"UNIT": "기준",
+						"UPDATE_BUDGET_ALERT": "",
 						"USER": "사용자",
 						"USER_GROUP": "사용자 그룹",
 						"WARNING": "경고"
 					},
 					"MONTHLY_PLANNING": "월별 예산 계획",
+					"NAME_EDIT_SUCCESS": "예산 이름 수정 완료",
 					"NOTIFICATIONS_CHANNEL": "알림 채널",
 					"ORIGINAL_DATA": "원본데이터",
 					"PAGE_NOTIFICATION": "Admin 모드에서만 설정을 변경할 수 있는 예산입니다.",
 					"PERIOD": "기간",
 					"PROVIDER": "프로바이더",
+					"RENAME": "이름 변경",
 					"SET": "설정",
 					"SET_NOTIFICATION_CHANNEL": "알림 채널 설정",
 					"TARGET": "타겟",
 					"TOTAL_AMOUNT": "총 예산 계획",
+					"TOTAL_BUDGET": "전체 예산",
 					"TOTAL_BUDGETED_AMOUNT": "전체 예산 금액(기간)",
 					"VIEW_ALL": "전체보기",
 					"VIEW_IN_ADMIN_MODE": "Admin 모드에서 확인"
@@ -623,32 +651,120 @@
 						"SPECIFIC_PROVIDER": "특정 프로바이더",
 						"WORKSPACE": "워크스페이스"
 					},
+					"BUDGET_DETAILS": {
+						"TITLE": ""
+					},
 					"CANCEL": "취소",
 					"CONFIRM": "확인",
+					"CREATE": {
+						"ADDITIONAL_RECIPIENTS": "추가 수신인",
+						"ADD_RECIPIENTS_TEXT": "예산 담당자는 다른 수신자 설정 여부와 관계없이 항상 알림을 받습니다:",
+						"ADD_THRESHOLD": "임계값 추가",
+						"ALERT_RECIPIENTS": "얼럿 수신처",
+						"AMOUNT_EACH_MONTH": "",
+						"APPLY_THE_SAME_AMOUNT": "",
+						"BASE_FOR_PERIOD_FILTER": "",
+						"BUDGET_AMOUNT": "",
+						"BUDGET_CYCLE": "예산 주기",
+						"BUDGET_CYCLE_DESCRIPTION": "먼저 위 섹션에서 시작 월과 종료 월을 설정하세요.",
+						"BUDGET_MANAGER": "예산 관리자",
+						"BUDGET_MANAGER_DESCRIPTION": "알림이 활성화되어 있으면 예산 관리자 전체가 알림을 받습니다.",
+						"CANCEL": "취소",
+						"CONTINUE": "계속하기",
+						"CURRENCY": "통화",
+						"DEFAULT": "기본",
+						"EDIT_BUDGET_MANAGER": "예산 관리자 변경",
+						"END_MONTH": "종료 월",
+						"ENTER_MANUALLY": "",
+						"EXCEEDS_AMOUNT": "알림 임계값",
+						"EXCEEDS_AMOUNT_DESCRIPTION": "실제 지출이 이를 초과할 경우 알림이 전송될 금액을 입력하세요.",
+						"EXCHANGE_RATE_SOURCE": "환율 기준",
+						"FIXED_TERM": "고정 예산",
+						"INCRASE_BY_SPECIFIC_PERCENTAGE": "",
+						"INITIAL_AMOUNT": "",
+						"LAST_COST_TREND": "최근 {count}개월 비용 추이",
+						"MONTHLY": "월별 예산",
+						"MONTHLY_BUDGET_ALLOCATION": "",
+						"MONTHLY_GROWTH_RATE": "",
+						"OTHERS": "이외 사용자",
+						"PREVIOUS": "뒤로가기",
+						"PROJECT": "프로젝트",
+						"PROJECT_DUPLICATED_WARNING1": "",
+						"PROJECT_DUPLICATED_WARNING2": "",
+						"PROJECT_MEMBER": "프로젝트 멤버",
+						"PROJECT_VALIDATION": "",
+						"REQUIRED_NAME": "이름을 입력하세요.",
+						"RESET_DATE": "",
+						"SCOPE": "범위",
+						"SELECT_MONTH": "월 선택",
+						"SERVICE_ACCOUNT": "서비스 어카운트",
+						"SERVICE_ACCOUNT_MANAGERS": "",
+						"SET": "설정",
+						"SET_ALERT_THRESHOLD": "알림 임계값 설정",
+						"SET_BUDGET_ALERTS": "예산 알림 설정",
+						"SHOW_THE_LIST": "목록 보기",
+						"SKIP_FOR_LATER": "다음에 진행",
+						"START_MONTH": "시작 월",
+						"STEP": "단계",
+						"STEP1_DESC": "예산을 간편하게 설정하여 클라우드 비용을 추적하고 관리하세요.",
+						"STEP2_DESCRIPTION": "통화 및 예산 주기를 설정하여 예산을 생성하세요.",
+						"STEP3_DESCRIPTION": "실제 지출이 임계값을 초과하면 알림을 받습니다.",
+						"THRESHOLD_INVALID_TEXT": "알림 기준 금액을 입력해 주세요.",
+						"WORKSPACE_OWNERS": "워크스페이스 소유자"
+					},
 					"CREATE_BUDGET": "예산 생성",
 					"DELETE_BUDGET": "예산 삭제",
 					"UPDATE_BUDGET": "예산 수정 "
 				},
 				"MAIN": {
+					"ACTIVE_TIL_DATE": "활성화",
+					"ALL": "전체",
 					"AMOUNT_PAID": "사용량({symbol})",
 					"AMOUNT_SPENT": "사용 금액",
 					"AMOUNT_USED": "사용금액({symbol})",
 					"ASC": "오름차순",
 					"BUDGET": "예산",
 					"BUDGETED": "책정된 예산",
+					"BUDGET_CYCLE": "",
+					"BUDGET_DELETE_DESC": "선택한 예산을 삭제 하시겠습니까?",
+					"BUDGET_EXCEEDED": "예산 초과됨",
 					"BUDGET_NAME": "예산명",
+					"BUDGET_SPENT_USAGE": "{percent}% 이상 사용됨",
+					"BUDGET_STATUS": "",
 					"COST_TYPE": "비용 발생 기준",
 					"CREATE": "예산 생성",
 					"CREATE_BUDGET": "예산 생성",
+					"CUSTOM": "기간 선택",
 					"DATA_SOURCE": "데이터 소스",
+					"DELETE": "삭제",
+					"DELETE_SUCCESS": "선택한 예산 삭제 완료",
 					"DESC": "내림차순",
+					"EDIT": "편집",
+					"EXCEEDED": "초과됨",
+					"EXCEEDED_BUDGET": "",
+					"EXPIRED": "만료됨",
+					"FILTER": "\u001d필터",
+					"FIXED_TERM": "고정 예산",
+					"HIDE_EXPIRED_BUDGETS": "만료된 예산 숨기기",
+					"LAST_12_MONTHS": "지난 12개월",
+					"LAST_3_MONTHS": "지난 3개월",
+					"LAST_6_MONTHS": "지난 6개월",
+					"LAST_MONTH": "지난달",
+					"LAST_YEAR": "지난해",
 					"MANAGED_BY_ADMIN": "Admin에 의해 관리됨",
+					"MONTH": "월",
+					"MONTHLY": "월별 예산",
 					"NO_BUDGET": "예산 없음",
 					"OVERSPENT": "예산초과",
 					"PERIOD": "기준 기간",
+					"PROJECT": "프로젝트",
 					"PROVIDER": "프로바이더",
+					"REMAINED": "남음",
+					"SELECT_MONTH": "월 선택",
+					"SERVICE_ACCOUNT": "서비스 어카운트",
 					"SINGLE_BUDGET": "단일 예산",
 					"THIS_MONTH": "이번 달",
+					"THIS_YEAR": "올해",
 					"TOTAL": "전체",
 					"UPDATE_BUDGET": "예산 수정",
 					"USAGE": "사용량({symbol})"
@@ -3438,6 +3554,7 @@
 				"SECRET_TYPE_LABEL": "암호화 키 유형",
 				"SEE_MORE": "더 알아보기",
 				"SERVICE_ACCOUNT": "서비스 어카운트",
+				"SERVICE_ACCOUNT_MANAGER": "서비스 어카운트 담당자",
 				"TAB_INPUT": "직접 입력",
 				"TAB_JSON": "JSON으로 입력",
 				"TAG_ADD": "태그 추가",
diff --git a/packages/mirinae/src/foundation/icons/icon-assets/ic_project.svg b/packages/mirinae/src/foundation/icons/icon-assets/ic_project.svg
new file mode 100644
index 0000000000..473f985412
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/icon-assets/ic_project.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.40002 1.95455V14.0455H12.6V1.95455H3.40002ZM3.20002 1C2.7582 1 2.40002 1.36162 2.40002 1.80769V14.1923C2.40002 14.6384 2.7582 15 3.20002 15H12.8C13.2419 15 13.6 14.6384 13.6 14.1923V1.80769C13.6 1.36162 13.2419 1 12.8 1H3.20002Z" fill="#232533"/>
+<path d="M7.06656 4.88157V14.427H6.13323L6.13323 4.88157H7.06656Z" fill="#232533"/>
+<path d="M6.39989 9.33611H3.06656L3.06656 8.44521L6.39989 8.44521V9.33611Z" fill="#232533"/>
+<path d="M2.73323 4.88157H13.3999V5.77248H2.73323V4.88157Z" fill="#232533"/>
+</svg>
diff --git a/packages/mirinae/src/foundation/icons/p-icons/ic_project.js b/packages/mirinae/src/foundation/icons/p-icons/ic_project.js
new file mode 100644
index 0000000000..7d612a2d7b
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/p-icons/ic_project.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'ic_project': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" 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="#232533"/><path pid="1" d="M7.067 4.882v9.545h-.934V4.882h.934z" _fill="#232533"/><path pid="2" d="M6.4 9.336H3.067v-.89H6.4v.89zM2.733 4.882H13.4v.89H2.733v-.89z" _fill="#232533"/>'
+  }
+})
diff --git a/packages/mirinae/src/foundation/icons/p-icons/index.js b/packages/mirinae/src/foundation/icons/p-icons/index.js
index 9a7a9f0452..859ba715a4 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'
 import './ic_project-filled'
 import './ic_provider-aws'
 import './ic_provider-gcp'