diff --git a/src/components.ts b/src/components.ts
index 89a1b951f..84c574735 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -69,7 +69,6 @@ export { default as PButtonTab } from './navigation/tabs/button-tab/PButtonTab.v
 export { default as PTab } from './navigation/tabs/tab/PTab.vue';
 export { default as PHeading } from './data-display/heading/PHeading.vue';
 export { default as PTree } from './data-display/tree/PTree.vue';
-export { default as PProgressWizard } from './navigation/wizards/progress-wizard/PProgressWizard.vue';
 export { default as PSelectStatus } from './inputs/select-status/PSelectStatus.vue';
 
 export { default as PNotificationBar } from './feedbacks/notification-bar/PNotificationBar.vue';
diff --git a/src/navigation/wizards/progress-wizard/PProgressWizard.stories.ts b/src/navigation/wizards/progress-wizard/PProgressWizard.stories.ts
deleted file mode 100644
index f962286e7..000000000
--- a/src/navigation/wizards/progress-wizard/PProgressWizard.stories.ts
+++ /dev/null
@@ -1,220 +0,0 @@
-import { ref } from 'vue';
-
-import { action } from '@storybook/addon-actions';
-import { object, boolean, withKnobs } from '@storybook/addon-knobs';
-import { VTooltip } from 'v-tooltip';
-
-import PProgressWizard from '@/navigation/wizards/progress-wizard/PProgressWizard.vue';
-
-
-export default {
-    title: 'Navigation/Wizards/Progress Wizard',
-    component: { PProgressWizard },
-    decorators: [withKnobs],
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/wq4wSowBcADBuUrMEZLz6i/SpaceONE-Console-Design?node-id=5894%3A174372',
-        },
-    },
-};
-
-const actions = () => ({
-    onChangeStep: action('changeStep'),
-    onCancel: action('cancel'),
-    onConfirm: action('confirm'),
-});
-
-const getProps = () => ({
-    tabs: {
-        default: object('tabs', [
-            {
-                name: 'conf',
-                label: 'Configure Collector',
-            },
-            {
-                name: 'credentials',
-                label: 'Choose Credentials',
-            },
-            {
-                name: 'tags',
-                label: 'Add Tags',
-                help: 'This is description of add tags step.',
-            },
-        ]),
-    },
-    invalidState: {
-        default: object('invalidState', {}),
-    },
-    loading: {
-        default: boolean('loading', false),
-    },
-    disabled: {
-        default: boolean('disabled', false),
-    },
-});
-
-
-export const progressWizard = () => ({
-    components: { PProgressWizard },
-    props: { ...getProps() },
-    template: `<p-progress-wizard v-bind="$props"
-                                  :activeIdx.sync="activeIdx"
-                                style="width: 100vw;"
-                                @changeStep="onChangeStep"
-                                @cancel="onCancel"
-                                @confirm="onConfirm"
-                >
-                    <template v-for="(tab) in tabs"
-                              :slot="'contents-' + tab.name"
-                    >
-                        <div style="background-color: mediumpurple; padding: 2rem;" :key="tab.name">
-                            <h2 style="text-align: center;">
-                                This is contents slot for '{{ tab.name }}' tab.
-
-                                This component needs 'tabs' property with follow format: 
-                                <pre>
-                                    key: String (essential),
-                                    label: String (recommended),
-                                    alert: String (or warning),
-                                    invalid: Boolean,
-                                    help: Boolean,
-                                    optional: Boolean,
-                                </pre>
-                            </h2>
-                            <br>
-                            <h4 v-for="(item, idx) in JSON.stringify(tab).split(',')"
-                                :key="idx"
-                            >
-                                {{item}}<br>
-                            </h4>
-                            <br>
-                            <p>* It has min height.</p>
-                        </div>
-                    </template>
-                </p-progress-wizard>`,
-    setup() {
-        return {
-            activeIdx: ref(0),
-            ...actions(),
-        };
-    },
-});
-
-export const topSlot = () => ({
-    components: { PProgressWizard },
-    props: { ...getProps() },
-    template: `<p-progress-wizard :tabs.sync="tabs"
-                                :active-idx.sync="activeIdx"
-                                style="width: 100vw;"
-                                @cancel="onCancel"
-                                @confirm="onConfirm"
-                >
-                    <template #top>
-                        <h1 style="background-color: hotpink;">This is 'top' slot</h1>
-                    </template>
-                </p-progress-wizard>`,
-    setup() {
-        return {
-            activeIdx: ref(0),
-            ...actions(),
-        };
-    },
-});
-
-export const progressSlot = () => ({
-    components: { PProgressWizard },
-    props: { ...getProps() },
-    template: `<p-progress-wizard :tabs.sync="tabs"
-                                :active-idx.sync="activeIdx"
-                                style="width: 100vw;"
-                                @cancel="onCancel"
-                                @confirm="onConfirm"
-                >
-                    <template v-for="(tab) in tabs"
-                              :slot="'progress-' + tab.name"
-                    >
-                        <div style="color: hotpink; padding: 2rem;" :key="'progress-'+tab.name">
-                                This is progress slot for '{{ tab.name }}' tab.
-                        </div>
-                    </template>
-                </p-progress-wizard>`,
-    setup() {
-        return {
-            activeIdx: ref(0),
-            ...actions(),
-        };
-    },
-});
-
-export const helpSlot = () => ({
-    components: { PProgressWizard },
-    directives: { tooltip: VTooltip },
-    props: { ...getProps() },
-    template: `<p-progress-wizard :tabs.sync="tabs"
-                                :active-idx.sync="activeIdx"
-                                style="width: 100vw;"
-                                @cancel="onCancel"
-                                @confirm="onConfirm"
-                >
-                    <template v-for="(tab) in tabs"
-                              :slot="'help-' + tab.name"
-                    >
-                          <button v-tooltip="{
-                              content: 'You can use tooltip options for customizing this help message.',
-                              placement: 'right',
-                              classes: ['p-tooltip'],
-                          }" class="p-tooltip">HOVER ME!</button>
-                    </template>
-                </p-progress-wizard>`,
-    setup() {
-        return {
-            activeIdx: ref(0),
-            ...actions(),
-        };
-    },
-});
-
-
-export const stepAppendSlot = () => ({
-    components: { PProgressWizard },
-    props: { ...getProps() },
-    template: `<p-progress-wizard :tabs.sync="tabs"
-                                :active-idx.sync="activeIdx"
-                                style="width: 100vw;"
-                                @cancel="onCancel"
-                                @confirm="onConfirm"
-                >
-                    <template slot="step-append-conf">
-                        <button style="display: inline-block;">This is step append slot</button>
-                    </template>
-                </p-progress-wizard>`,
-    setup() {
-        return {
-            activeIdx: ref(0),
-            ...actions(),
-        };
-    },
-});
-
-
-export const bottomSlot = () => ({
-    components: { PProgressWizard },
-    props: { ...getProps() },
-    template: `<p-progress-wizard :tabs.sync="tabs"
-                                :active-idx.sync="activeIdx"
-                                style="width: 100vw;"
-                                @cancel="onCancel"
-                                @confirm="onConfirm"
-                >
-                    <template #bottom>
-                        <h1 style="background-color: hotpink;">This is 'bottom' slot</h1>
-                    </template>
-                </p-progress-wizard>`,
-    setup() {
-        return {
-            activeIdx: ref(0),
-            ...actions(),
-        };
-    },
-});
diff --git a/src/navigation/wizards/progress-wizard/PProgressWizard.vue b/src/navigation/wizards/progress-wizard/PProgressWizard.vue
deleted file mode 100644
index 064d7b77e..000000000
--- a/src/navigation/wizards/progress-wizard/PProgressWizard.vue
+++ /dev/null
@@ -1,329 +0,0 @@
-<template>
-    <p-pane-layout class="p-progress-wizard">
-        <slot name="top">
-            <slot name="progress">
-                <div class="progress-tab-nav">
-                    <div v-for="(tab, idx) in tabs"
-                         :key="tab.name"
-                         class="tab-nav-item"
-                         :class="{
-                             active: idx === proxyActiveIdx,
-                             invalid: invalidState[tab.name],
-                         }"
-                         :style="{width: tabWidth}"
-                         @click="onChangeTab(idx)"
-                    >
-                        <span class="triangle-bg" />
-                        <span class="triangle" />
-                        <slot :name="`progress-${tab.name}`"
-                              :tab="tab"
-                        >
-                            <span>{{ Number(idx) + 1 }}.
-                                {{ tab.label || tab.name }} {{ tab.optional ? `(${$t('COMPONENT.PROGRESS_WIZARD.OPTIONAL')})`: '' }}
-                            </span>
-                        </slot>
-                    </div>
-                </div>
-            </slot>
-            <template v-if="activeTab">
-                <aside v-if="activeTab.alert"
-                       class="caution"
-                >
-                    <p-i name="ic_alert"
-                         height="1rem"
-                         width="1rem"
-                    />
-                    {{ activeTab.alert }}
-                </aside>
-                <aside v-if="activeTab.warning"
-                       class="caution warning"
-                >
-                    <p-i name="ic_alert"
-                         height="1rem"
-                         width="1rem"
-                         color="inherit"
-                    />
-                    {{ activeTab.warning }}
-                </aside>
-            </template>
-        </slot>
-
-        <template v-if="activeTab">
-            <!--            <div class="step-head">-->
-            <!--                <div class="step-title">-->
-            <!--                    <span class="step">-->
-            <!--                        {{ $t('COMPONENT.PROGRESS_WIZARD.STEP', {step: proxyActiveIdx + 1 }) }}.-->
-            <!--                    </span>-->
-            <!--                    <span class="title">{{ activeTab.label || activeTab.name }}</span>-->
-            <!--                    <span v-if="activeTab.optional" class="optional"> ({{ $t('COMPONENT.PROGRESS_WIZARD.OPTIONAL') }})</span>-->
-            <!--                </div>-->
-            <!--                <div class="step-appendix">-->
-            <!--                    <slot :name="`step-append-${activeTab.name}`" :tab="activeTab" />-->
-            <!--                </div>-->
-            <!--            </div>-->
-            <div class="contents">
-                <keep-alive>
-                    <slot :name="`contents-${activeTab.name}`"
-                          :tab="activeTab"
-                    />
-                </keep-alive>
-            </div>
-        </template>
-
-        <slot name="bottom">
-            <div class="bottom">
-                <p-button style-type="tertiary"
-                          :disabled="loading"
-                          size="lg"
-                          class="txt-btn"
-                          @click="$emit('cancel', $event)"
-                >
-                    {{ $t('COMPONENT.PROGRESS_WIZARD.CANCEL') }}
-                </p-button>
-                <div class="nav-btn-box">
-                    <p-button v-if="!isFirstTab"
-                              :disabled="loading"
-                              style-type="highlight"
-                              size="lg"
-                              @click="onClickPrev"
-                    >
-                        <p-i name="ic_back"
-                             color="inherit"
-                        />{{ $t('COMPONENT.PROGRESS_WIZARD.PREV') }}
-                    </p-button>
-                    <p-button v-if="!isLastTab"
-                              :disabled="loading"
-                              style-type="highlight"
-                              size="lg"
-                              @click="onClickNext"
-                    >
-                        {{ $t('COMPONENT.PROGRESS_WIZARD.NEXT') }}<p-i name="ic_back"
-                                                                       color="inherit"
-                                                                       dir="down"
-                        />
-                    </p-button>
-                    <p-button :loading="loading"
-                              :disabled="disabled"
-                              class="txt-btn"
-                              style-type="highlight"
-                              size="lg"
-                              @click="$emit('confirm', tabs, $event)"
-                    >
-                        {{ $t('COMPONENT.PROGRESS_WIZARD.CONFIRM') }}
-                    </p-button>
-                </div>
-            </div>
-        </slot>
-    </p-pane-layout>
-</template>
-
-<script lang="ts">
-import {
-    toRefs, reactive, computed,
-} from 'vue';
-
-
-import { size } from 'lodash';
-
-import PI from '@/foundation/icons/PI.vue';
-import { useProxyValue } from '@/hooks';
-import PButton from '@/inputs/buttons/button/PButton.vue';
-import PPaneLayout from '@/layouts/pane-layout/PPaneLayout.vue';
-import type {
-    ProgressWizardProps,
-} from '@/navigation/wizards/progress-wizard/type';
-
-
-export default {
-    name: 'PProgressWizard',
-    components: {
-        PPaneLayout,
-        PI,
-        PButton,
-    },
-    props: {
-        tabs: {
-            type: Array,
-            default: () => [],
-        },
-        /** sync */
-        activeIdx: {
-            type: Number,
-            default: 0,
-        },
-        invalidState: {
-            type: Object,
-            default: () => ({}),
-        },
-        loading: {
-            type: Boolean,
-            default: false,
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    setup(props: ProgressWizardProps, { emit }) {
-        const state = reactive({
-            tabWidth: computed(() => `${100 / size(props.tabs)}%`),
-            proxyActiveIdx: useProxyValue('activeIdx', props, emit),
-            activeTab: computed(() => props.tabs[state.proxyActiveIdx]),
-            isFirstTab: computed(() => state.proxyActiveIdx - 1 < 0),
-            isLastTab: computed(() => state.proxyActiveIdx + 1 >= props.tabs.length),
-        });
-
-        const onClickPrev = () => {
-            if (state.isFirstTab) return;
-            emit('changeStep', state.proxyActiveIdx, state.proxyActiveIdx - 1);
-            state.proxyActiveIdx -= 1;
-        };
-        const onClickNext = () => {
-            if (state.isLastTab) return;
-            emit('changeStep', state.proxyActiveIdx, state.proxyActiveIdx + 1);
-            state.proxyActiveIdx += 1;
-        };
-
-        const onChangeTab = (idx) => {
-            if (props.activeIdx !== idx) {
-                emit('changeStep', props.activeIdx, idx);
-                state.proxyActiveIdx = idx;
-            }
-        };
-
-        return {
-            ...toRefs(state),
-            onClickPrev,
-            onClickNext,
-            onChangeTab,
-        };
-    },
-};
-</script>
-
-<style lang="postcss">
-.p-progress-wizard {
-    $height: 2.5rem;
-
-    @define-mixin triangle-color $size, $color {
-        border-left: $size solid $color;
-    }
-
-    @define-mixin triangle $size, $z-idx, $color {
-        position: absolute;
-        right: calc($(size) * -1);
-        z-index: $z-idx;
-        width: 0;
-        height: 0;
-        border-top: $size solid transparent;
-        border-bottom: $size solid transparent;
-
-        @mixin triangle-color $size, $color;
-    }
-
-    .progress-tab-nav {
-        @apply flex w-full items-center justify-center;
-        height: $height;
-        .tab-nav-item {
-            @apply relative flex items-center justify-center h-full p-0 text-sm cursor-pointer bg-white border-t border-b border-black text-black;
-            flex: 1 1 auto;
-            .triangle {
-                @mixin triangle calc(($(height) / 2) - 1px), 2, theme('colors.white');
-            }
-            .triangle-bg {
-                @mixin triangle calc($(height) / 2), 1, theme('colors.black');
-            }
-            &:last-child {
-                @apply border-r border-black rounded-r-lg;
-                .triangle, .triangle-bg {
-                    display: none;
-                }
-            }
-            &:first-child {
-                @apply border-l border-black rounded-l-lg;
-            }
-            &.active {
-                @apply text-lg font-bold bg-black text-white;
-                .triangle {
-                    @mixin triangle-color calc(($(height) / 2) - 1px), theme('colors.black');
-                }
-                .triangle-bg {
-                    @mixin triangle-color calc($(height) / 2), theme('colors.black');
-                }
-            }
-            &.invalid {
-                @apply border-alert text-alert bg-white;
-                .triangle {
-                    @mixin triangle-color calc(($(height) / 2) - 1px), theme('colors.white');
-                }
-                .triangle-bg {
-                    @mixin triangle-color calc($(height) / 2), theme('colors.alert');
-                }
-                &.active {
-                    @apply bg-alert border-alert text-white;
-                    .triangle {
-                        @mixin triangle-color calc(($(height) / 2) - 1px), theme('colors.alert');
-                    }
-                }
-            }
-            .help {
-                margin-left: 0.5rem;
-            }
-        }
-    }
-
-    padding: 1.5rem 1rem 1rem 1rem;
-    .step-head {
-        @apply flex w-full border-b border-gray-200 pb-3;
-        margin-top: 2.375rem;
-        .step-title {
-            @apply text-lg;
-            line-height: 120%;
-        }
-        .step {
-            @apply mr-4;
-        }
-        .title {
-            @apply font-bold;
-        }
-        .optional {
-            font-style: italic;
-        }
-    }
-    .step-appendix {
-        display: flex;
-        flex-grow: 1;
-        justify-content: flex-end;
-    }
-    .caution {
-        display: flex;
-        align-items: center;
-        font-size: 0.875rem;
-        padding-top: 1rem;
-        .p-i-icon {
-            margin-right: 0.5rem;
-        }
-        &.warning {
-            @apply text-coral;
-        }
-    }
-    .txt-btn {
-        line-height: 1.5rem;
-    }
-    .contents {
-        min-height: 360px;
-    }
-    .bottom {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .nav-btn-box {
-            display: inline-flex;
-            align-items: center;
-            .p-button {
-                margin-left: 1.5rem;
-            }
-        }
-    }
-}
-</style>
diff --git a/src/navigation/wizards/progress-wizard/type.ts b/src/navigation/wizards/progress-wizard/type.ts
deleted file mode 100644
index cf96790eb..000000000
--- a/src/navigation/wizards/progress-wizard/type.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-
-export interface ProgressTab {
-    name: string;
-    label?: string;
-    help?: string;
-    optional?: string;
-}
-
-
-export interface ProgressWizardProps {
-    tabs: ProgressTab[];
-    activeIdx: number;
-    invalidState: {
-        [key: string]: boolean;
-    };
-    loading: boolean;
-    disabled: boolean;
-}