diff --git a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.mdx b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.mdx
index d6b9c4b9f2..b41b70aa53 100644
--- a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.mdx
+++ b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.mdx
@@ -12,6 +12,17 @@ import * as PButtonModalStories from './PButtonModal.stories';
 <br/>
 <br/>
 
+## Basic
+<Canvas of={PButtonModalStories.Basic} />
+
+<br/>
+<br/>
+
+## Loading Backdrop
+<Canvas of={PButtonModalStories.LoadingBackdrop} />
+
+<br/>
+<br/>
 
 ## Playground
 <Canvas of={PButtonModalStories.Playground} />
diff --git a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.stories.ts b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.stories.ts
index cfbc69028a..e6e49e0da2 100644
--- a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.stories.ts
+++ b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.stories.ts
@@ -8,6 +8,7 @@ import type { ComponentProps } from 'vue-component-type-helpers';
 
 import PButton from '@/controls/buttons/button/PButton.vue';
 import PSelectDropdown from '@/controls/dropdown/select-dropdown/PSelectDropdown.vue';
+import { getMenuItems } from '@/feedbacks/modals/button-modal/mock';
 import PButtonModal from '@/feedbacks/modals/button-modal/PButtonModal.vue';
 import { getButtonModalArgs, getButtonModalArgTypes, getButtonModalParameters } from '@/feedbacks/modals/button-modal/story-helper';
 
@@ -54,6 +55,7 @@ const Template: Story = {
                                 :hide-footer-confirm-button="hideFooterConfirmButton"
                                 :footer-reset-button-visible="footerResetButtonVisible"
                                 :loading="loading"
+                                :loading-backdrop="loadingBackdrop"
                                 :disabled="disabled"
                                 :absolute="absolute"
                                 :modal-body-id="modalBodyId"
@@ -75,62 +77,7 @@ const Template: Story = {
             const state = reactive({
                 modalVisible: props.visible,
                 contents: computed(() => faker.lorem.lines(props.contentsHeight)),
-                menu: [
-                    {
-                        type: 'item', label: 'Add', name: 'add', disabled: false,
-                    },
-                    {
-                        type: 'item', label: 'Hello', name: 'hello', disabled: false,
-                    },
-                    { type: 'divider' },
-                    { type: 'header', label: 'this is header' },
-                    {
-                        type: 'item', label: 'Update', name: 'update', disabled: false,
-                    },
-                    {
-                        type: 'item', label: 'Delete', name: 'delete', disabled: false,
-                    },
-                    { type: 'divider' },
-                    {
-                        type: 'item', label: 'Collect', name: 'collect', disabled: false,
-                    },
-                    { type: 'divider' },
-                    {
-                        type: 'item', label: 'Remove', name: 'remove', disabled: true,
-                    },
-                ],
-                items: [
-                    { type: 'item', label: 'one', name: 'one' },
-                    { type: 'item', label: 'two', name: 'two' },
-                    { type: 'item', label: 'three', name: 'three' },
-                    { type: 'item', label: 'four', name: 'four' },
-                    { type: 'item', label: 'five', name: 'five' },
-                    { type: 'item', label: 'six', name: 'six' },
-                    { type: 'item', label: 'one', name: 'one' },
-                    { type: 'item', label: 'two', name: 'two' },
-                    { type: 'item', label: 'three', name: 'three' },
-                    { type: 'item', label: 'four', name: 'four' },
-                    { type: 'item', label: 'five', name: 'five' },
-                    { type: 'item', label: 'six', name: 'six' },
-                    { type: 'item', label: 'one', name: 'one' },
-                    { type: 'item', label: 'two', name: 'two' },
-                    { type: 'item', label: 'three', name: 'three' },
-                    { type: 'item', label: 'four', name: 'four' },
-                    { type: 'item', label: 'five', name: 'five' },
-                    { type: 'item', label: 'six', name: 'six' },
-                    { type: 'item', label: 'one', name: 'one' },
-                    { type: 'item', label: 'two', name: 'two' },
-                    { type: 'item', label: 'three', name: 'three' },
-                    { type: 'item', label: 'four', name: 'four' },
-                    { type: 'item', label: 'five', name: 'five' },
-                    { type: 'item', label: 'six', name: 'six' },
-                    { type: 'item', label: 'one', name: 'one' },
-                    { type: 'item', label: 'two', name: 'two' },
-                    { type: 'item', label: 'three', name: 'three' },
-                    { type: 'item', label: 'four', name: 'four' },
-                    { type: 'item', label: 'five', name: 'five' },
-                    { type: 'item', label: 'six', name: 'six' },
-                ],
+                items: getMenuItems(),
             });
             const launchModal = () => {
                 state.modalVisible = true;
@@ -148,6 +95,80 @@ const Template: Story = {
     }),
 };
 
+
+export const Basic: Story = {
+    render: () => ({
+        components: { PButtonModal, PButton },
+        template: `
+            <div>
+                <p-button @click="modalVisible = true">Launch a modal</p-button>
+                <p-button-modal :visible.sync="modalVisible"
+                                @confirm="handleConfirm"
+                >
+                    <template #body>
+                        <p>{{ contents }}</p>
+                    </template>
+                </p-button-modal>
+            </div>
+        `,
+        setup() {
+            const state = reactive({
+                modalVisible: false,
+                contents: computed(() => faker.lorem.lines(5)),
+            });
+            const handleConfirm = () => {
+                state.modalVisible = false;
+            };
+            return {
+                ...toRefs(state),
+                handleConfirm,
+            };
+        },
+    }),
+};
+
+export const LoadingBackdrop: Story = {
+    render: () => ({
+        components: { PButtonModal, PButton },
+        template: `
+            <div>
+                <p-button @click="launchModal">Launch a modal</p-button>
+                <p-button-modal :visible.sync="modalVisible"
+                                :loading-backdrop="loadingBackdrop"
+                                @confirm="handleConfirm"
+                >
+                    <template #body>
+                        <p>{{ contents }}</p>
+                    </template>
+                </p-button-modal>
+            </div>
+        `,
+        setup() {
+            const state = reactive({
+                modalVisible: false,
+                contents: computed(() => faker.lorem.lines(5)),
+                loadingBackdrop: true,
+            });
+
+            const launchModal = () => {
+                state.loadingBackdrop = true;
+                state.modalVisible = true;
+                setTimeout(() => {
+                    state.loadingBackdrop = false;
+                }, 3000);
+            };
+            const handleConfirm = () => {
+                state.modalVisible = false;
+            };
+            return {
+                ...toRefs(state),
+                launchModal,
+                handleConfirm,
+            };
+        },
+    }),
+};
+
 export const Playground: Story = {
     ...Template,
 };
diff --git a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.vue b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.vue
index 30121132e3..9143975cf4 100644
--- a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.vue
+++ b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.vue
@@ -5,10 +5,18 @@
                     @after-leave="onModalLeave"
         >
             <div class="modal-mask"
-                 :class="[{'no-backdrop':!backdrop}, {'absolute': !!absolute}]"
+                 :class="[{'no-backdrop':!backdrop}, {
+                     'absolute': !!absolute,
+                     'loading-backdrop': loadingBackdrop
+                 }]"
                  :style="absolute ? [{'top': `${absolute}rem`}, {'left': `${absolute}rem`}] : {}"
             >
-                <div class="modal-wrapper"
+                <p-spinner v-if="loadingBackdrop"
+                           size="xl"
+                           style-type="white"
+                />
+                <div v-if="!loadingBackdrop"
+                     class="modal-wrapper"
                      :class="dialogClassObject"
                      role="dialog"
                      aria-modal="true"
@@ -115,6 +123,7 @@ import type { TranslateResult } from 'vue-i18n';
 import PButton from '@/controls/buttons/button/PButton.vue';
 import { BUTTON_STYLE } from '@/controls/buttons/button/type';
 import PIconButton from '@/controls/buttons/icon-button/PIconButton.vue';
+import PSpinner from '@/feedbacks/loading/spinner/PSpinner.vue';
 import type { ButtonModalProps } from '@/feedbacks/modals/button-modal/type';
 import { THEME_COLORS } from '@/feedbacks/modals/button-modal/type';
 import { SizeMapping } from '@/feedbacks/modals/type';
@@ -127,6 +136,7 @@ import { useProxyValue } from '@/hooks';
 export default defineComponent<ButtonModalProps>({
     name: 'PButtonModal',
     components: {
+        PSpinner,
         PI,
         PIconButton,
         PButton,
@@ -204,6 +214,10 @@ export default defineComponent<ButtonModalProps>({
             type: String,
             default: undefined,
         },
+        loadingBackdrop: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup(props, { emit }) {
         const state = reactive({
diff --git a/packages/mirinae/src/feedbacks/modals/button-modal/mock.ts b/packages/mirinae/src/feedbacks/modals/button-modal/mock.ts
new file mode 100644
index 0000000000..826220b9da
--- /dev/null
+++ b/packages/mirinae/src/feedbacks/modals/button-modal/mock.ts
@@ -0,0 +1,34 @@
+import type { MenuItem } from '@/controls/context-menu/type';
+
+export const getMenuItems = (): MenuItem[] => [
+    { type: 'item', label: 'one', name: 'one' },
+    { type: 'item', label: 'two', name: 'two' },
+    { type: 'item', label: 'three', name: 'three' },
+    { type: 'item', label: 'four', name: 'four' },
+    { type: 'item', label: 'five', name: 'five' },
+    { type: 'item', label: 'six', name: 'six' },
+    { type: 'item', label: 'one', name: 'one' },
+    { type: 'item', label: 'two', name: 'two' },
+    { type: 'item', label: 'three', name: 'three' },
+    { type: 'item', label: 'four', name: 'four' },
+    { type: 'item', label: 'five', name: 'five' },
+    { type: 'item', label: 'six', name: 'six' },
+    { type: 'item', label: 'one', name: 'one' },
+    { type: 'item', label: 'two', name: 'two' },
+    { type: 'item', label: 'three', name: 'three' },
+    { type: 'item', label: 'four', name: 'four' },
+    { type: 'item', label: 'five', name: 'five' },
+    { type: 'item', label: 'six', name: 'six' },
+    { type: 'item', label: 'one', name: 'one' },
+    { type: 'item', label: 'two', name: 'two' },
+    { type: 'item', label: 'three', name: 'three' },
+    { type: 'item', label: 'four', name: 'four' },
+    { type: 'item', label: 'five', name: 'five' },
+    { type: 'item', label: 'six', name: 'six' },
+    { type: 'item', label: 'one', name: 'one' },
+    { type: 'item', label: 'two', name: 'two' },
+    { type: 'item', label: 'three', name: 'three' },
+    { type: 'item', label: 'four', name: 'four' },
+    { type: 'item', label: 'five', name: 'five' },
+    { type: 'item', label: 'six', name: 'six' },
+];
diff --git a/packages/mirinae/src/feedbacks/modals/button-modal/story-helper.ts b/packages/mirinae/src/feedbacks/modals/button-modal/story-helper.ts
index cb3bde6abf..1afd704193 100644
--- a/packages/mirinae/src/feedbacks/modals/button-modal/story-helper.ts
+++ b/packages/mirinae/src/feedbacks/modals/button-modal/story-helper.ts
@@ -240,6 +240,21 @@ export const getButtonModalArgTypes = (): ArgTypes => ({
         },
         control: 'boolean',
     },
+    loadingBackdrop: {
+        name: 'loadingBackdrop',
+        type: { name: 'boolean' },
+        description: 'Show Loading in backdrop',
+        table: {
+            type: {
+                summary: 'boolean',
+            },
+            category: 'props',
+            defaultValue: {
+                summary: false,
+            },
+        },
+        control: 'boolean',
+    },
     disabled: {
         name: 'disabled',
         type: { name: 'boolean' },
diff --git a/packages/mirinae/src/feedbacks/modals/button-modal/type.ts b/packages/mirinae/src/feedbacks/modals/button-modal/type.ts
index 1ddfd7f37f..f74dc1c2fc 100644
--- a/packages/mirinae/src/feedbacks/modals/button-modal/type.ts
+++ b/packages/mirinae/src/feedbacks/modals/button-modal/type.ts
@@ -38,5 +38,6 @@ export interface ButtonModalProps {
     footerResetButtonVisible: boolean;
 
     loading: boolean;
+    loadingBackdrop: boolean;
     disabled: boolean;
 }