diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts
index a98cf3253..dafdeba72 100644
--- a/frontend/.storybook/preview.ts
+++ b/frontend/.storybook/preview.ts
@@ -3,6 +3,8 @@ import { setup } from '@storybook/vue3'
 import { registerPlugins } from '../src/plugins'
 import { withVuetifyTheme } from './withVeutifyTheme.decorator'
 import type { App } from 'vue'
+import '@bcgov/bc-sans/css/BCSans.css'
+import '../src/styles/style.scss'
 
 const preview: Preview = {
   parameters: {
@@ -28,7 +30,17 @@ const preview: Preview = {
       },
     },
   },
-  decorators: [withVuetifyTheme],
+  decorators: [
+    withVuetifyTheme,
+    (story) => ({
+      components: { story },
+      template: `
+        <div style="font-family: 'BCSans', 'Noto Sans', Verdana, Arial, sans-serif;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
 }
 
 export default preview
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b19307919..27953c9b8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,9 +3,7 @@
     <TheHeader />
 
     <v-main id="main">
-      <AppMessageDialog />
       <AppNotification />
-      <AppConfirmDialog />
       <AppDialogDragger />
 
       <DefaultLayout>
@@ -16,9 +14,7 @@
 </template>
 <script setup lang="ts">
 import TheHeader from '@/components/layout/TheHeader.vue'
-import AppMessageDialog from '@/components/common/AppMessageDialog.vue'
 import AppNotification from '@/components/common/AppNotification.vue'
-import AppConfirmDialog from '@/components/common/AppConfirmDialog.vue'
 import AppDialogDragger from '@/components/common/AppDialogDragger.vue'
 import DefaultLayout from '@/layouts/DefaultLayout.vue'
 </script>
diff --git a/frontend/src/components/common/AppMessageDialog.stories.ts b/frontend/src/components/common/AppMessageDialog.stories.ts
new file mode 100644
index 000000000..f4c3264cc
--- /dev/null
+++ b/frontend/src/components/common/AppMessageDialog.stories.ts
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppMessageDialog from '@/components/common/AppMessageDialog.vue'
+
+const meta: Meta<typeof AppMessageDialog> = {
+  title: 'components/common/AppMessageDialog',
+  component: AppMessageDialog,
+  argTypes: {
+    dialog: {
+      control: 'boolean',
+      description: 'Dialog visibility',
+      defaultValue: true,
+    },
+    title: {
+      control: 'text',
+      description: 'Dialog title',
+      defaultValue: 'VDYP Message',
+    },
+    message: {
+      control: 'text',
+      description: 'Dialog message',
+      defaultValue: 'This is a message.',
+    },
+    dialogWidth: {
+      control: { type: 'range', min: 200, max: 800, step: 50 },
+      description: 'Dialog width',
+      defaultValue: 400,
+    },
+    dialogBorderRadius: {
+      control: { type: 'range', min: 0, max: 50, step: 1 },
+      description: 'Dialog border radius',
+      defaultValue: 8,
+    },
+    btnLabel: {
+      control: 'text',
+      description: 'Button label',
+      defaultValue: 'OK',
+    },
+    headerBackground: {
+      control: 'color',
+      description: 'Background color for header',
+      defaultValue: '#003366',
+    },
+    headerColor: {
+      control: 'color',
+      description: 'Color for header',
+      defaultValue: '#ffffff',
+    },
+    actionsBackground: {
+      control: 'color',
+      description: 'Background color for actions',
+      defaultValue: '#f6f6f6',
+    },
+    'onUpdate:dialog': {
+      action: 'update:dialog',
+      description: 'Emitted when dialog state changes',
+    },
+    onClose: {
+      action: 'close',
+      description: 'Emitted when close button is clicked',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AppMessageDialog>
+
+export const Primary: Story = {
+  args: {
+    dialog: true,
+    title: 'Missing Information',
+    message:
+      'Input field is missing essential information which must be filled in order to confirm and continue.',
+    dialogWidth: 400,
+    dialogBorderRadius: 8,
+    btnLabel: 'Continue Editing',
+    headerBackground: '#003366',
+    headerColor: '#ffffff',
+    actionsBackground: '#f6f6f6',
+  },
+}
diff --git a/frontend/src/components/common/AppMessageDialog.vue b/frontend/src/components/common/AppMessageDialog.vue
index f162277db..c7d9adc0a 100644
--- a/frontend/src/components/common/AppMessageDialog.vue
+++ b/frontend/src/components/common/AppMessageDialog.vue
@@ -1,17 +1,16 @@
 <template>
   <v-dialog
-    v-model="dialog"
+    :model-value="computedDialog"
+    @update:model-value="updateDialog"
     persistent
-    :max-width="options && options.width ? options.width : '400'"
+    :max-width="computedDialogWidth"
   >
-    <v-card>
-      <v-card-title
-        style="font-weight: 300 !important; padding-left: 30px !important"
-        class="popup-header"
-        >{{ title || 'VDYP Message' }}</v-card-title
-      >
+    <v-card :style="computedDialogStyle">
+      <v-card-title :style="computedHeaderStyle" class="popup-header">
+        {{ computedTitle }}
+      </v-card-title>
       <v-card-text
-        v-show="Boolean(message)"
+        v-show="Boolean(computedMessage)"
         class="pa-4"
         style="
           font-size: 14px;
@@ -20,15 +19,18 @@
           white-space: pre-line;
         "
       >
-        {{ message }}
+        {{ computedMessage }}
       </v-card-text>
       <v-card-actions
         class="pt-3"
-        style="background-color: #f6f6f6; border-top: 1px solid #0000001f"
+        :style="{
+          backgroundColor: computedActionsBackground,
+          borderTop: '1px solid #0000001f',
+        }"
       >
         <v-spacer></v-spacer>
         <v-btn class="blue-btn ml-2" @click="agree">{{
-          btnLabel || 'OK'
+          computedBtnLabel
         }}</v-btn>
       </v-card-actions>
     </v-card>
@@ -36,21 +38,60 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useMessageDialogStore } from '@/stores/common/messageDialogStore'
+import { defineProps, defineEmits, computed } from 'vue'
+import { BUTTON_LABEL } from '@/constants/constants'
+
+const props = defineProps<{
+  dialog?: boolean
+  title?: string
+  message?: string
+  dialogWidth?: number
+  dialogBorderRadius?: number
+  btnLabel?: string
+  headerBackground?: string
+  headerColor?: string
+  actionsBackground?: string
+}>()
+
+const emit = defineEmits(['update:dialog', 'close'])
+
+const computedDialog = computed(() => props.dialog ?? false)
+const computedTitle = computed(() => props.title ?? '')
+const computedMessage = computed(() => props.message ?? '')
+const computedDialogWidth = computed(() => props.dialogWidth ?? 400)
+const computedBtnLabel = computed(
+  () => props.btnLabel ?? BUTTON_LABEL.CONT_EDIT,
+)
 
-const messageDialogStore = useMessageDialogStore()
+const computedHeaderStyle = computed(() => {
+  return {
+    fontWeight: '300 !important',
+    paddingLeft: '30px !important',
+    padding: '1rem !important',
+    background: props.headerBackground ?? '#003366 !important',
+    color: props.headerColor ?? '#ffffff !important',
+  }
+})
 
-const dialog = computed(() => messageDialogStore.isOpen)
-const title = computed(() => messageDialogStore.dialogTitle || 'VDYP Message')
-const message = computed(() => messageDialogStore.dialogMessage || '')
-const btnLabel = computed(() => messageDialogStore.dialogBtnLabel || 'OK')
-const options = computed(
-  () => messageDialogStore.dialogOptions || { width: '400px' },
+const computedActionsBackground = computed(
+  () => props.actionsBackground ?? '#f6f6f6 !important;',
 )
 
+const computedDialogStyle = computed(() => {
+  return {
+    borderRadius: `${props.dialogBorderRadius ?? 8}px`,
+  }
+})
+
+// Emit updates for dialog visibility
+const updateDialog = (value: boolean) => {
+  emit('update:dialog', value)
+}
+
+// Emit close event and close the dialog
 const agree = () => {
-  messageDialogStore.agree()
+  emit('update:dialog', false)
+  emit('close')
 }
 </script>
 
diff --git a/frontend/src/components/common/AppNotification.vue b/frontend/src/components/common/AppNotification.vue
index bfe0bb580..030bffdec 100644
--- a/frontend/src/components/common/AppNotification.vue
+++ b/frontend/src/components/common/AppNotification.vue
@@ -1,49 +1,24 @@
 <template>
-  <div>
-    <v-snackbar
-      v-model="isShow"
-      :timeout="NOTIFICATION.SHOW_TIME"
-      :color="type || 'info'"
-      class="elevation-12"
-      location="top"
-      @click:outside="closeMessage"
-    >
-      <div class="d-flex align-center">
-        <v-icon class="mr-2">{{ getIcon(type) }}</v-icon>
-        <span> {{ message || 'Notification message' }}</span>
-      </div>
-
-      <template #actions>
-        <v-btn icon variant="text" @click="closeMessage">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </template>
-    </v-snackbar>
-  </div>
+  <AppSnackbar
+    :is-visible="isShow"
+    :message="message"
+    :type="type"
+    :color="color"
+    :timeout="NOTIFICATION.SHOW_TIME"
+    @close="closeMessage"
+  />
 </template>
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useNotificationStore } from '@/stores/common/notificationStore'
-import type { MessageType } from '@/types/types'
+import AppSnackbar from './AppSnackbar.vue'
 import { NOTIFICATION } from '@/constants/constants'
 
 const notificationStore = useNotificationStore()
 
-const { isShow, message, type } = storeToRefs(notificationStore)
+const { isShow, message, type, color } = storeToRefs(notificationStore)
 
 const closeMessage = () => {
   notificationStore.resetMessage()
 }
-
-const getIcon = (type: MessageType) => {
-  const icon: { [key in MessageType]: string } = {
-    '': '',
-    info: 'mdi-information',
-    success: 'mdi-check-circle',
-    error: 'mdi-alert-circle',
-    warning: 'mdi-alert',
-  }
-
-  return icon[type] || 'mdi-information'
-}
 </script>
diff --git a/frontend/src/components/common/AppProgressCircular.stories.ts b/frontend/src/components/common/AppProgressCircular.stories.ts
index e986d7747..6d8195494 100644
--- a/frontend/src/components/common/AppProgressCircular.stories.ts
+++ b/frontend/src/components/common/AppProgressCircular.stories.ts
@@ -7,6 +7,11 @@ const meta: Meta<typeof AppProgressCircular> = {
   argTypes: {
     isShow: { control: { type: 'boolean' }, defaultValue: true },
     showMessage: { control: { type: 'boolean' }, defaultValue: true },
+    hasBackground: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+      description: 'Whether the background color is applied',
+    },
     message: { control: { type: 'text' }, defaultValue: 'Loading...' },
     circleSize: {
       control: { type: 'range', min: 10, max: 200, step: 1 },
@@ -28,11 +33,6 @@ const meta: Meta<typeof AppProgressCircular> = {
       defaultValue: 'rgba(255, 255, 255, 0.8)',
       description: 'Background color of the wrapper div',
     },
-    hasBackground: {
-      control: { type: 'boolean' },
-      defaultValue: true,
-      description: 'Whether the background color is applied',
-    },
     padding: {
       control: { type: 'range', min: 0, max: 50, step: 1 },
       defaultValue: 20,
@@ -54,28 +54,13 @@ export const Primary: Story = {
   args: {
     isShow: true,
     showMessage: true,
+    hasBackground: true,
     message: 'Loading...',
     circleSize: 70,
     circleWidth: 5,
     circleColor: 'primary',
     backgroundColor: 'rgba(255, 255, 255, 0.8)',
-    hasBackground: true,
     padding: 20,
     borderRadius: 10,
   },
 }
-
-export const NoBackground: Story = {
-  args: {
-    ...Primary.args,
-    hasBackground: false,
-  },
-}
-
-export const LargeCircle: Story = {
-  args: {
-    ...Primary.args,
-    circleSize: 150,
-    circleWidth: 10,
-  },
-}
diff --git a/frontend/src/components/common/AppSnackbar.stories.ts b/frontend/src/components/common/AppSnackbar.stories.ts
new file mode 100644
index 000000000..b3813ad5a
--- /dev/null
+++ b/frontend/src/components/common/AppSnackbar.stories.ts
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppSnackbar from './AppSnackbar.vue'
+
+const meta: Meta<typeof AppSnackbar> = {
+  title: 'components/common/AppSnackbar',
+  component: AppSnackbar,
+  argTypes: {
+    isVisible: {
+      control: 'boolean',
+      description: 'Controls visibility of the snackbar',
+      defaultValue: true,
+    },
+    message: {
+      control: 'text',
+      description: 'Notification message to display',
+      defaultValue: 'This is a notification',
+    },
+    type: {
+      control: 'select',
+      options: ['info', 'success', 'error', 'warning', ''],
+      description: 'Type of notification',
+      defaultValue: 'info',
+    },
+    timeout: {
+      control: { type: 'range', min: 2000, max: 10000, step: 500 },
+      description: 'Duration for the notification to stay visible',
+      defaultValue: 5000,
+    },
+    autoTimeout: {
+      control: 'boolean',
+      description: 'Enable or disable auto timeout',
+      defaultValue: true,
+    },
+    showTimer: {
+      control: 'boolean',
+      description: 'Show or hide timer on snackbar',
+      defaultValue: false,
+    },
+    location: {
+      control: 'select',
+      options: ['top', 'center', 'bottom', 'right', 'left'],
+      description: 'Location of the snackbar',
+      defaultValue: 'top',
+    },
+    color: {
+      control: 'color',
+      description: 'Snackbar background color',
+      defaultValue: '#2196F3',
+    },
+    rounded: {
+      control: 'boolean',
+      description: 'Enable or disable rounded corners',
+      defaultValue: true,
+    },
+    onClose: { action: 'close', description: 'Emitted when snackbar closes' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AppSnackbar>
+
+export const InfoNotification: Story = {
+  args: {
+    isVisible: true,
+    autoTimeout: false,
+    showTimer: false,
+    message: 'This is an informational message.',
+    type: 'info',
+    timeout: 5000,
+    location: 'top',
+    color: '#d9eaf7',
+    rounded: true,
+  },
+}
+
+export const ErrorNotification: Story = {
+  args: {
+    isVisible: true,
+    autoTimeout: true,
+    showTimer: false,
+    message: 'This is an error message.',
+    type: 'error',
+    timeout: 5000,
+    location: 'top',
+    color: '#d8292f',
+    rounded: true,
+  },
+}
+
+export const WarningNotification: Story = {
+  args: {
+    isVisible: true,
+    autoTimeout: true,
+    showTimer: false,
+    message: 'This is a warning message.',
+    type: 'warning',
+    timeout: 5000,
+    location: 'top',
+    color: '#f9f1c6',
+    rounded: true,
+  },
+}
+
+export const SuccessNotification: Story = {
+  args: {
+    isVisible: true,
+    autoTimeout: true,
+    showTimer: false,
+    message: 'This is a success message.',
+    type: 'success',
+    timeout: 5000,
+    location: 'top',
+    color: '#2e8540',
+    rounded: true,
+  },
+}
diff --git a/frontend/src/components/common/AppSnackbar.vue b/frontend/src/components/common/AppSnackbar.vue
new file mode 100644
index 000000000..13dea3072
--- /dev/null
+++ b/frontend/src/components/common/AppSnackbar.vue
@@ -0,0 +1,83 @@
+<template>
+  <v-snackbar
+    v-model="isVisibleLocal"
+    :timeout="computedAutoTimeout ? computedTimeout : -1"
+    :color="computedColor"
+    :rounded="computedRounded"
+    :location="computedLocation"
+    :show-timer="showTimer"
+    class="elevation-12"
+    @update:model-value="onClose"
+    @click:outside="onClose"
+  >
+    <div class="d-flex align-center">
+      <v-icon class="mr-2">{{ getIcon(computedType) }}</v-icon>
+      <span>{{ computedMessage }}</span>
+    </div>
+
+    <template #actions>
+      <v-btn icon variant="text" @click="onClose">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+  isVisible?: boolean
+  message?: string
+  type?: 'info' | 'success' | 'error' | 'warning' | ''
+  color?: string
+  location?: 'top' | 'center' | 'bottom' | 'right' | 'left'
+  timeout?: number
+  autoTimeout?: boolean
+  showTimer?: boolean
+  rounded?: boolean | string
+}>()
+
+const emit = defineEmits(['update:isVisible', 'close'])
+
+const isVisibleLocal = ref(props.isVisible)
+
+watch(
+  () => props.isVisible,
+  (newVal) => {
+    isVisibleLocal.value = newVal
+  },
+)
+
+const computedMessage = computed(() => props.message ?? 'Notification message')
+const computedType = computed(() => props.type ?? 'info')
+const computedColor = computed(() => props.color ?? 'info')
+const computedLocation = computed(() => props.location ?? 'top')
+const computedTimeout = computed(() => props.timeout ?? 5000)
+const computedAutoTimeout = computed(() => props.autoTimeout ?? true)
+const computedRounded = computed(() => props.rounded ?? true)
+const showTimer = computed(() => props.showTimer ?? false)
+
+const onClose = () => {
+  isVisibleLocal.value = false
+  emit('update:isVisible', false)
+  emit('close')
+}
+
+const getIcon = (type: string): string => {
+  const iconMap: { [key: string]: string } = {
+    info: 'mdi-information',
+    success: 'mdi-check-circle',
+    error: 'mdi-alert-circle',
+    warning: 'mdi-alert',
+    '': 'mdi-information',
+  }
+  return iconMap[type] ?? 'mdi-information'
+}
+</script>
+
+<style scoped>
+.elevation-12 {
+  border-radius: 8px;
+}
+</style>
diff --git a/frontend/src/components/model-param-selection-panes/ReportInfo.vue b/frontend/src/components/model-param-selection-panes/ReportInfo.vue
index 7134fcece..10f3c2733 100644
--- a/frontend/src/components/model-param-selection-panes/ReportInfo.vue
+++ b/frontend/src/components/model-param-selection-panes/ReportInfo.vue
@@ -1,5 +1,14 @@
 <template>
   <v-card class="elevation-4">
+    <AppMessageDialog
+      :dialog="messageDialog.dialog"
+      :title="messageDialog.title"
+      :message="messageDialog.message"
+      :dialogWidth="messageDialog.dialogWidth"
+      :btnLabel="messageDialog.btnLabel"
+      @update:dialog="(value) => (messageDialog.dialog = value)"
+      @close="handleDialogClose"
+    />
     <v-expansion-panels v-model="panelOpenStates.reportInfo">
       <v-expansion-panel hide-actions>
         <v-expansion-panel-title>
@@ -182,7 +191,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useModelParameterStore } from '@/stores/modelParameterStore'
-import { useMessageDialogStore } from '@/stores/common/messageDialogStore'
+import AppMessageDialog from '@/components/common/AppMessageDialog.vue'
 import { storeToRefs } from 'pinia'
 import {
   volumeReportedOptions,
@@ -193,10 +202,11 @@ import {
   PANEL,
   MODEL_PARAMETER_PANEL,
   NUM_INPUT_LIMITS,
+  BUTTON_LABEL,
 } from '@/constants/constants'
 import { DEFAULT_VALUES } from '@/constants/defaults'
 import { MDL_PRM_INPUT_ERR, MSG_DIALOG_TITLE } from '@/constants/message'
-import type { SpeciesGroup } from '@/interfaces/interfaces'
+import type { SpeciesGroup, MessageDialog } from '@/interfaces/interfaces'
 import { ReportInfoValidation } from '@/validation/reportInfoValidation'
 
 const form = ref<HTMLFormElement>()
@@ -204,7 +214,12 @@ const form = ref<HTMLFormElement>()
 const reportInfoValidator = new ReportInfoValidation()
 
 const modelParameterStore = useModelParameterStore()
-const messageDialogStore = useMessageDialogStore()
+
+const messageDialog = ref<MessageDialog>({
+  dialog: false,
+  title: '',
+  message: '',
+})
 
 const {
   panelOpenStates,
@@ -233,11 +248,13 @@ const validateComparison = (): boolean => {
       startingAge.value,
     )
   ) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      MDL_PRM_INPUT_ERR.RPT_VLD_COMP_FNSH_AGE,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: MDL_PRM_INPUT_ERR.RPT_VLD_COMP_FNSH_AGE,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
+
     return false
   }
 
@@ -246,38 +263,41 @@ const validateComparison = (): boolean => {
 
 const validateRange = (): boolean => {
   if (!reportInfoValidator.validateStartingAgeRange(startingAge.value)) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      MDL_PRM_INPUT_ERR.RPT_VLD_START_AGE_RNG(
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: MDL_PRM_INPUT_ERR.RPT_VLD_START_AGE_RNG(
         NUM_INPUT_LIMITS.STARTING_AGE_MIN,
         NUM_INPUT_LIMITS.STARTING_AGE_MAX,
       ),
-      { width: 400 },
-    )
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
   if (!reportInfoValidator.validateFinishingAgeRange(finishingAge.value)) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      MDL_PRM_INPUT_ERR.RPT_VLD_START_FNSH_RNG(
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: MDL_PRM_INPUT_ERR.RPT_VLD_START_FNSH_RNG(
         NUM_INPUT_LIMITS.FINISHING_AGE_MIN,
         NUM_INPUT_LIMITS.FINISHING_AGE_MAX,
       ),
-      { width: 400 },
-    )
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
   if (!reportInfoValidator.validateAgeIncrementRange(ageIncrement.value)) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      MDL_PRM_INPUT_ERR.RPT_VLD_AGE_INC_RNG(
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: MDL_PRM_INPUT_ERR.RPT_VLD_AGE_INC_RNG(
         NUM_INPUT_LIMITS.AGE_INC_MIN,
         NUM_INPUT_LIMITS.AGE_INC_MAX,
       ),
-      { width: 400 },
-    )
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
@@ -319,5 +339,7 @@ const clear = () => {
     ...group,
   }))
 }
+
+const handleDialogClose = () => {}
 </script>
 <style scoped></style>
diff --git a/frontend/src/components/model-param-selection-panes/SiteInfo.vue b/frontend/src/components/model-param-selection-panes/SiteInfo.vue
index 8593145a5..2fd98002b 100644
--- a/frontend/src/components/model-param-selection-panes/SiteInfo.vue
+++ b/frontend/src/components/model-param-selection-panes/SiteInfo.vue
@@ -1,5 +1,14 @@
 <template>
   <v-card class="elevation-4">
+    <AppMessageDialog
+      :dialog="messageDialog.dialog"
+      :title="messageDialog.title"
+      :message="messageDialog.message"
+      :dialogWidth="messageDialog.dialogWidth"
+      :btnLabel="messageDialog.btnLabel"
+      @update:dialog="(value) => (messageDialog.dialog = value)"
+      @close="handleDialogClose"
+    />
     <v-expansion-panels v-model="panelOpenStates.siteInfo">
       <v-expansion-panel hide-actions>
         <v-expansion-panel-title>
@@ -208,7 +217,7 @@
 import { ref, computed, watch } from 'vue'
 import { Util } from '@/utils/util'
 import { useModelParameterStore } from '@/stores/modelParameterStore'
-import { useMessageDialogStore } from '@/stores/common/messageDialogStore'
+import AppMessageDialog from '@/components/common/AppMessageDialog.vue'
 import { storeToRefs } from 'pinia'
 import {
   becZoneOptions,
@@ -222,6 +231,7 @@ import {
   NUM_INPUT_LIMITS,
   CONTINUOUS_INC_DEC,
   SPIN_BUTTON,
+  BUTTON_LABEL,
 } from '@/constants/constants'
 import { DEFAULT_VALUES } from '@/constants/defaults'
 import {
@@ -229,7 +239,7 @@ import {
   MSG_DIALOG_TITLE,
   MDL_PRM_INPUT_HINT,
 } from '@/constants/message'
-import type { SpeciesGroup } from '@/interfaces/interfaces'
+import type { SpeciesGroup, MessageDialog } from '@/interfaces/interfaces'
 import { SiteInfoValidation } from '@/validation/siteInfoValidation'
 
 const form = ref<HTMLFormElement>()
@@ -237,7 +247,12 @@ const form = ref<HTMLFormElement>()
 const siteInfoValidator = new SiteInfoValidation()
 
 const modelParameterStore = useModelParameterStore()
-const messageDialogStore = useMessageDialogStore()
+
+const messageDialog = ref<MessageDialog>({
+  dialog: false,
+  title: '',
+  message: '',
+})
 
 const {
   panelOpenStates,
@@ -359,11 +374,13 @@ const stopDecrementBHA50SiteIndex = () => {
 
 const validateRange = (): boolean => {
   if (!siteInfoValidator.validateBha50SiteIndexRange(bha50SiteIndex.value)) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      MDL_PRM_INPUT_ERR.SITE_VLD_SI_RNG,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: MDL_PRM_INPUT_ERR.SITE_VLD_SI_RNG,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
+
     return false
   }
 
@@ -372,11 +389,15 @@ const validateRange = (): boolean => {
 
 const validateRequiredFields = (): boolean => {
   if (!siteInfoValidator.validateRequiredFields(bha50SiteIndex.value)) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.MISSING_INFO,
-      MDL_PRM_INPUT_ERR.SITE_VLD_SPCZ_REQ_SI_VAL(selectedSiteSpecies.value),
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.MISSING_INFO,
+      message: MDL_PRM_INPUT_ERR.SITE_VLD_SPCZ_REQ_SI_VAL(
+        selectedSiteSpecies.value,
+      ),
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
+
     return false
   }
 
@@ -427,6 +448,8 @@ const clear = () => {
 
   handleDerivedByChange(derivedBy.value, selectedSiteSpecies.value)
 }
+
+const handleDialogClose = () => {}
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/components/model-param-selection-panes/SpeciesInfo.vue b/frontend/src/components/model-param-selection-panes/SpeciesInfo.vue
index a4a395264..59448b1d3 100644
--- a/frontend/src/components/model-param-selection-panes/SpeciesInfo.vue
+++ b/frontend/src/components/model-param-selection-panes/SpeciesInfo.vue
@@ -1,5 +1,14 @@
 <template>
   <v-card class="elevation-4">
+    <AppMessageDialog
+      :dialog="messageDialog.dialog"
+      :title="messageDialog.title"
+      :message="messageDialog.message"
+      :dialogWidth="messageDialog.dialogWidth"
+      :btnLabel="messageDialog.btnLabel"
+      @update:dialog="(value) => (messageDialog.dialog = value)"
+      @close="handleDialogClose"
+    />
     <v-expansion-panels v-model="panelOpenStates.speciesInfo">
       <v-expansion-panel hide-actions>
         <v-expansion-panel-title>
@@ -243,7 +252,7 @@
 import { ref, watch, computed } from 'vue'
 import { Util } from '@/utils/util'
 import { useModelParameterStore } from '@/stores/modelParameterStore'
-import { useMessageDialogStore } from '@/stores/common/messageDialogStore'
+import AppMessageDialog from '@/components/common/AppMessageDialog.vue'
 import { storeToRefs } from 'pinia'
 import { derivedByOptions } from '@/constants/options'
 import { SPECIES_MAP } from '@/constants/mappings'
@@ -253,10 +262,11 @@ import {
   NUM_INPUT_LIMITS,
   CONTINUOUS_INC_DEC,
   SPIN_BUTTON,
+  BUTTON_LABEL,
 } from '@/constants/constants'
 import { DEFAULT_VALUES } from '@/constants/defaults'
 import { MDL_PRM_INPUT_ERR, MSG_DIALOG_TITLE } from '@/constants/message'
-import type { SpeciesList } from '@/interfaces/interfaces'
+import type { SpeciesList, MessageDialog } from '@/interfaces/interfaces'
 import { SpeciesInfoValidation } from '@/validation/speciesInfoValidation'
 
 const form = ref<HTMLFormElement>()
@@ -264,7 +274,12 @@ const form = ref<HTMLFormElement>()
 const speciesInfoValidator = new SpeciesInfoValidation()
 
 const modelParameterStore = useModelParameterStore()
-const messageDialogStore = useMessageDialogStore()
+
+const messageDialog = ref<MessageDialog>({
+  dialog: false,
+  title: '',
+  message: '',
+})
 
 const {
   panelOpenStates,
@@ -443,7 +458,13 @@ const validateDuplicateSpecies = () => {
       ? MDL_PRM_INPUT_ERR.SPCZ_VLD_DUP_W_LABEL(duplicateSpecies, speciesLabel)
       : MDL_PRM_INPUT_ERR.SPCZ_VLD_DUP_WO_LABEL(duplicateSpecies)
 
-    messageDialogStore.openDialog(MSG_DIALOG_TITLE.DATA_DUPLICATED, message)
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.DATA_DUPLICATED,
+      message: message,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
+
     return false
   }
 
@@ -457,11 +478,13 @@ const validateTotalSpeciesPercent = () => {
       totalSpeciesGroupPercent.value,
     )
   ) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.DATA_INCOMPLETE,
-      MDL_PRM_INPUT_ERR.SPCZ_VLD_TOTAL_PCT,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.DATA_INCOMPLETE,
+      message: MDL_PRM_INPUT_ERR.SPCZ_VLD_TOTAL_PCT,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
+
     return false
   }
   return true
@@ -469,11 +492,13 @@ const validateTotalSpeciesPercent = () => {
 
 const validateRequired = () => {
   if (!speciesInfoValidator.validateRequired(derivedBy.value)) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.MISSING_INFO,
-      MDL_PRM_INPUT_ERR.SPCZ_VLD_MISSING_DERIVED_BY,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.MISSING_INFO,
+      message: MDL_PRM_INPUT_ERR.SPCZ_VLD_MISSING_DERIVED_BY,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
+
     return false
   }
   return true
@@ -517,6 +542,8 @@ const clear = () => {
 
   derivedBy.value = DEFAULT_VALUES.DERIVED_BY
 }
+
+const handleDialogClose = () => {}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/model-param-selection-panes/StandDensity.vue b/frontend/src/components/model-param-selection-panes/StandDensity.vue
index 3db705161..c92a0b0dc 100644
--- a/frontend/src/components/model-param-selection-panes/StandDensity.vue
+++ b/frontend/src/components/model-param-selection-panes/StandDensity.vue
@@ -1,5 +1,14 @@
 <template>
   <v-card class="elevation-4">
+    <AppMessageDialog
+      :dialog="messageDialog.dialog"
+      :title="messageDialog.title"
+      :message="messageDialog.message"
+      :dialogWidth="messageDialog.dialogWidth"
+      :btnLabel="messageDialog.btnLabel"
+      @update:dialog="(value) => (messageDialog.dialog = value)"
+      @close="handleDialogClose"
+    />
     <v-expansion-panels v-model="panelOpenStates.standDensity">
       <v-expansion-panel hide-actions>
         <v-expansion-panel-title>
@@ -72,18 +81,20 @@
 import { ref, computed } from 'vue'
 import { Util } from '@/utils/util'
 import { useModelParameterStore } from '@/stores/modelParameterStore'
-import { useMessageDialogStore } from '@/stores/common/messageDialogStore'
+import AppMessageDialog from '@/components/common/AppMessageDialog.vue'
 import { storeToRefs } from 'pinia'
 import {
   PANEL,
   MODEL_PARAMETER_PANEL,
   NUM_INPUT_LIMITS,
+  BUTTON_LABEL,
 } from '@/constants/constants'
 import {
   MDL_PRM_INPUT_ERR,
   MSG_DIALOG_TITLE,
   MDL_PRM_INPUT_HINT,
 } from '@/constants/message'
+import type { MessageDialog } from '@/interfaces/interfaces'
 import { StandDensityValidation } from '@/validation/standDensityValidation'
 
 const form = ref<HTMLFormElement>()
@@ -91,7 +102,12 @@ const form = ref<HTMLFormElement>()
 const standDensityValidator = new StandDensityValidation()
 
 const modelParameterStore = useModelParameterStore()
-const messageDialogStore = useMessageDialogStore()
+
+const messageDialog = ref<MessageDialog>({
+  dialog: false,
+  title: '',
+  message: '',
+})
 
 const { panelOpenStates, percentStockableArea } =
   storeToRefs(modelParameterStore)
@@ -110,11 +126,12 @@ const validateRange = (): boolean => {
       percentStockableArea.value,
     )
   ) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      MDL_PRM_INPUT_ERR.DENSITY_VLD_PCT_STCB_AREA_RNG,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: MDL_PRM_INPUT_ERR.DENSITY_VLD_PCT_STCB_AREA_RNG,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
@@ -160,6 +177,8 @@ const clear = () => {
     form.value.reset()
   }
 }
+
+const handleDialogClose = () => {}
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/constants/constants.ts b/frontend/src/constants/constants.ts
index 2e2667233..3c7919f65 100644
--- a/frontend/src/constants/constants.ts
+++ b/frontend/src/constants/constants.ts
@@ -118,3 +118,7 @@ export const MODEL_PARAM_TAB_NAME = Object.freeze({
 export const DOWNLOAD_FILE_NAME = Object.freeze({
   MULTI_POLYGON_OUTPUT: 'vdyp-output.zip',
 })
+
+export const BUTTON_LABEL = Object.freeze({
+  CONT_EDIT: 'Continue Editing',
+})
diff --git a/frontend/src/interfaces/interfaces.ts b/frontend/src/interfaces/interfaces.ts
index 98d8ef503..0d9bb59b2 100644
--- a/frontend/src/interfaces/interfaces.ts
+++ b/frontend/src/interfaces/interfaces.ts
@@ -4,9 +4,18 @@ export interface NotificationState {
   isShow: boolean
   message: string
   type: MessageType
+  color: MessageType
   timeoutId: number | null
 }
 
+export interface MessageDialog {
+  dialog: boolean
+  title: string
+  message: string
+  dialogWidth?: number
+  btnLabel?: string
+}
+
 export interface JobSearchParams {
   pageNumber: number
   pageSize: number
diff --git a/frontend/src/services/keycloak.ts b/frontend/src/services/keycloak.ts
index de9169666..62549269a 100644
--- a/frontend/src/services/keycloak.ts
+++ b/frontend/src/services/keycloak.ts
@@ -66,7 +66,7 @@ export const initializeKeycloak = async (): Promise<Keycloak | undefined> => {
       keycloakInstance.authenticated = true
 
       // Perform token validation
-      if (!validateAccessToken(keycloakInstance.token)) {
+      if (!validateAccessToken(keycloakInstance.token ?? '')) {
         logErrorAndLogout(
           AUTH_ERR.AUTH_001,
           'Token validation failed (Error: AUTH_001).',
@@ -129,6 +129,11 @@ export const initializeKeycloak = async (): Promise<Keycloak | undefined> => {
 }
 
 const validateAccessToken = (accessToken: string): boolean => {
+  if (!accessToken) {
+    console.error('Access token is missing.')
+    return false
+  }
+
   try {
     const tokenParsed = JSON.parse(atob(accessToken.split('.')[1]))
 
diff --git a/frontend/src/stores/common/messageDialogStore.ts b/frontend/src/stores/common/messageDialogStore.ts
deleted file mode 100644
index 35a9e13f0..000000000
--- a/frontend/src/stores/common/messageDialogStore.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { defineStore } from 'pinia'
-
-interface DialogOptions {
-  color: string
-  width: number
-}
-
-interface MessageDialogState {
-  dialog: boolean
-  title: string | null
-  message: string | null
-  options: DialogOptions
-  btnLabel: string | null
-}
-
-export const useMessageDialogStore = defineStore('messageDialog', {
-  state: (): MessageDialogState => ({
-    dialog: false,
-    title: null,
-    message: null,
-    options: {
-      color: 'grey lighten-3',
-      width: 400,
-    },
-    btnLabel: null,
-  }),
-
-  getters: {
-    isOpen: (state) => state.dialog,
-    dialogTitle: (state) => state.title,
-    dialogMessage: (state) => state.message,
-    dialogOptions: (state) => state.options,
-    dialogBtnLabel: (state) => state.btnLabel,
-  },
-
-  actions: {
-    openDialog(
-      newTitle: string,
-      newMessage: string,
-      newOptions?: Partial<DialogOptions>,
-      newBtnLabel?: string | null,
-    ): void {
-      this.dialog = true
-      this.title = newTitle
-      this.message = newMessage
-      if (newOptions) {
-        this.options = { ...this.options, ...newOptions }
-      }
-      this.btnLabel = newBtnLabel ?? 'Continue Editing'
-    },
-
-    agree() {
-      this.dialog = false
-    },
-  },
-})
diff --git a/frontend/src/stores/common/notificationStore.ts b/frontend/src/stores/common/notificationStore.ts
index 4989be703..2d11720d8 100644
--- a/frontend/src/stores/common/notificationStore.ts
+++ b/frontend/src/stores/common/notificationStore.ts
@@ -9,6 +9,7 @@ export const useNotificationStore = defineStore({
     isShow: false,
     message: '',
     type: '',
+    color: '',
     timeoutId: null,
   }),
   getters: {},
@@ -24,6 +25,7 @@ export const useNotificationStore = defineStore({
       this.resetMessage()
       this.message = message
       this.type = type
+      this.color = type
       this.isShow = true
 
       // Automatically close messages after NOTIFICATION.SHOW_TIME
diff --git a/frontend/src/views/input-model-parameters/FileUpload.vue b/frontend/src/views/input-model-parameters/FileUpload.vue
index ab2debe4e..68a1f404a 100644
--- a/frontend/src/views/input-model-parameters/FileUpload.vue
+++ b/frontend/src/views/input-model-parameters/FileUpload.vue
@@ -12,6 +12,15 @@
       :padding="20"
       :borderRadius="10"
     />
+    <AppMessageDialog
+      :dialog="messageDialog.dialog"
+      :title="messageDialog.title"
+      :message="messageDialog.message"
+      :dialogWidth="messageDialog.dialogWidth"
+      :btnLabel="messageDialog.btnLabel"
+      @update:dialog="(value) => (messageDialog.dialog = value)"
+      @close="handleDialogClose"
+    />
     <v-form ref="form" @submit.prevent="fileUploadRunModel">
       <v-card class="elevation-4">
         <div class="pl-16 pt-10">
@@ -195,14 +204,18 @@ import { ref } from 'vue'
 import { SelectedExecutionOptionsEnum } from '@/services/vdyp-api'
 import { projectionHcsvPost } from '@/services/apiActions'
 import { handleApiError } from '@/services/apiErrorHandler'
-import { useMessageDialogStore } from '@/stores/common/messageDialogStore'
+import AppMessageDialog from '@/components/common/AppMessageDialog.vue'
 import AppProgressCircular from '@/components/common/AppProgressCircular.vue'
 import {
   volumeReportedOptions,
   includeInReportOptions,
   projectionTypeOptions,
 } from '@/constants/options'
-import { NUM_INPUT_LIMITS, DOWNLOAD_FILE_NAME } from '@/constants/constants'
+import {
+  NUM_INPUT_LIMITS,
+  DOWNLOAD_FILE_NAME,
+  BUTTON_LABEL,
+} from '@/constants/constants'
 import {
   MDL_PRM_INPUT_ERR,
   MSG_DIALOG_TITLE,
@@ -210,6 +223,7 @@ import {
   PROGRESS_MSG,
   SUCESS_MSG,
 } from '@/constants/message'
+import type { MessageDialog } from '@/interfaces/interfaces'
 import { DEFAULT_VALUES } from '@/constants/defaults'
 import { FileUploadValidation } from '@/validation/fileUploadValidation'
 import { Util } from '@/utils/util'
@@ -233,7 +247,11 @@ const reportTitle = ref<string | null>(DEFAULT_VALUES.REPORT_TITLE)
 const layerFile = ref<File | null>(null)
 const polygonFile = ref<File | null>(null)
 
-const messageDialogStore = useMessageDialogStore()
+const messageDialog = ref<MessageDialog>({
+  dialog: false,
+  title: '',
+  message: '',
+})
 
 const validateComparison = (): boolean => {
   if (
@@ -242,11 +260,12 @@ const validateComparison = (): boolean => {
       startingAge.value,
     )
   ) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      MDL_PRM_INPUT_ERR.RPT_VLD_COMP_FNSH_AGE,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: MDL_PRM_INPUT_ERR.RPT_VLD_COMP_FNSH_AGE,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
@@ -255,38 +274,41 @@ const validateComparison = (): boolean => {
 
 const validateRange = (): boolean => {
   if (!fileUploadValidator.validateStartingAgeRange(startingAge.value)) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      MDL_PRM_INPUT_ERR.RPT_VLD_START_AGE_RNG(
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: MDL_PRM_INPUT_ERR.RPT_VLD_START_AGE_RNG(
         NUM_INPUT_LIMITS.STARTING_AGE_MIN,
         NUM_INPUT_LIMITS.STARTING_AGE_MAX,
       ),
-      { width: 400 },
-    )
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
   if (!fileUploadValidator.validateFinishingAgeRange(finishingAge.value)) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      MDL_PRM_INPUT_ERR.RPT_VLD_START_FNSH_RNG(
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: MDL_PRM_INPUT_ERR.RPT_VLD_START_FNSH_RNG(
         NUM_INPUT_LIMITS.FINISHING_AGE_MIN,
         NUM_INPUT_LIMITS.FINISHING_AGE_MAX,
       ),
-      { width: 400 },
-    )
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
   if (!fileUploadValidator.validateAgeIncrementRange(ageIncrement.value)) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      MDL_PRM_INPUT_ERR.RPT_VLD_AGE_INC_RNG(
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: MDL_PRM_INPUT_ERR.RPT_VLD_AGE_INC_RNG(
         NUM_INPUT_LIMITS.AGE_INC_MIN,
         NUM_INPUT_LIMITS.AGE_INC_MAX,
       ),
-      { width: 400 },
-    )
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
@@ -295,38 +317,42 @@ const validateRange = (): boolean => {
 
 const validateFiles = async () => {
   if (!layerFile.value) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.MISSING_FILE,
-      FILE_UPLOAD_ERR.LAYER_FILE_MISSING,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.MISSING_FILE,
+      message: FILE_UPLOAD_ERR.LAYER_FILE_MISSING,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
   if (!polygonFile.value) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.MISSING_FILE,
-      FILE_UPLOAD_ERR.POLYGON_FILE_MISSING,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.MISSING_FILE,
+      message: FILE_UPLOAD_ERR.POLYGON_FILE_MISSING,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
   if (!(await fileUploadValidator.isCSVFile(layerFile.value))) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_FILE,
-      FILE_UPLOAD_ERR.LAYER_FILE_NOT_CSV_FORMAT,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_FILE,
+      message: FILE_UPLOAD_ERR.LAYER_FILE_NOT_CSV_FORMAT,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
   if (!(await fileUploadValidator.isCSVFile(polygonFile.value))) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_FILE,
-      FILE_UPLOAD_ERR.POLYGON_FILE_NOT_CSV_FORMAT,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_FILE,
+      message: FILE_UPLOAD_ERR.POLYGON_FILE_NOT_CSV_FORMAT,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
 
@@ -341,11 +367,12 @@ const validateRequiredFields = (): boolean => {
       ageIncrement.value,
     )
   ) {
-    messageDialogStore.openDialog(
-      MSG_DIALOG_TITLE.INVALID_INPUT,
-      FILE_UPLOAD_ERR.RPT_VLD_REQUIRED_FIELDS,
-      { width: 400 },
-    )
+    messageDialog.value = {
+      dialog: true,
+      title: MSG_DIALOG_TITLE.INVALID_INPUT,
+      message: FILE_UPLOAD_ERR.RPT_VLD_REQUIRED_FIELDS,
+      btnLabel: BUTTON_LABEL.CONT_EDIT,
+    }
     return false
   }
   return true
@@ -415,6 +442,8 @@ const fileUploadRunModel = async () => {
     isProgressVisible.value = false
   }
 }
+
+const handleDialogClose = () => {}
 </script>
 <style scoped>
 .file-upload-run-model-card {