diff --git a/codex-ui/src/vue/components/alert/Alert.types.ts b/codex-ui/src/vue/components/alert/Alert.types.ts
index a2926c6d..93e4d650 100644
--- a/codex-ui/src/vue/components/alert/Alert.types.ts
+++ b/codex-ui/src/vue/components/alert/Alert.types.ts
@@ -1,14 +1,14 @@
 /**
  * Various alert type
  */
-export type Alertype = 'success' | 'error' | 'warning' | 'info' | 'default';
+export type AlerType = 'success' | 'error' | 'warning' | 'info' | 'default';
 
 /**
  * alert configuration
  */
 export interface AlertOptions {
 
-  id?: number;
+  id?: string;
   /**
    * Custom icon class to be used.
    *
@@ -23,7 +23,7 @@ export interface AlertOptions {
    *
    *  Can be any of `(success, error, default, info, warning)`
    */
-  type?: Alertype;
+  type?: AlerType;
   /**
    *  Position of the alert on the screen.
    *
diff --git a/codex-ui/src/vue/components/alert/Alert.vue b/codex-ui/src/vue/components/alert/Alert.vue
index 24dfcd5b..e2b23b4d 100644
--- a/codex-ui/src/vue/components/alert/Alert.vue
+++ b/codex-ui/src/vue/components/alert/Alert.vue
@@ -19,12 +19,11 @@
 import { defineProps, computed, withDefaults, ref } from 'vue';
 import Icon from '../icon/Icon.vue';
 import type { AlertOptions } from './Alert.types';
-import { genId } from './constant';
 
 const el = ref<HTMLElement>();
 
 const props = withDefaults(defineProps<AlertOptions>(), {
-  id: genId(),
+  id: `alert-' ${Math.random()}`,
   position: 'bottom-center',
   message: '',
   icon: '',
diff --git a/codex-ui/src/vue/components/alert/AlertContainer.vue b/codex-ui/src/vue/components/alert/AlertContainer.vue
index 19cf744c..63e7c5d0 100644
--- a/codex-ui/src/vue/components/alert/AlertContainer.vue
+++ b/codex-ui/src/vue/components/alert/AlertContainer.vue
@@ -2,7 +2,7 @@
   <div
     :class="[
       $style.alert__container,
-      $style['alert__container--' + props.position]
+      $style['alert__container--' + defaultAlertOpt.position]
     ]"
   >
     <AlertTransition>
@@ -19,19 +19,8 @@
 import Alert from './Alert.vue';
 import AlertTransition from './AlertTransition.vue';
 import { useAlert } from './useAlert';
-import type { AlertOptions } from './Alert.types';
-import { genId } from './constant';
 
-const props = withDefaults(defineProps<AlertOptions>(), {
-  id: genId(),
-  position: 'bottom-center',
-  content: '',
-  icon: '',
-  type: undefined,
-  timeout: 5000,
-});
-
-const { alerts } = useAlert();
+const { alerts, defaultAlertOpt } = useAlert();
 
 </script>
 
diff --git a/codex-ui/src/vue/components/alert/constant.ts b/codex-ui/src/vue/components/alert/constant.ts
deleted file mode 100644
index d8e63338..00000000
--- a/codex-ui/src/vue/components/alert/constant.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * Alert Id generator
- */
-export const genId = (i => () => i++)(0);
diff --git a/codex-ui/src/vue/components/alert/useAlert.ts b/codex-ui/src/vue/components/alert/useAlert.ts
index 9a945baa..9e2c259f 100644
--- a/codex-ui/src/vue/components/alert/useAlert.ts
+++ b/codex-ui/src/vue/components/alert/useAlert.ts
@@ -1,9 +1,14 @@
 import type { Ref } from 'vue';
 import { ref } from 'vue';
 import { createSharedComposable } from '@vueuse/core';
-import type { AlertOptions, Alertype } from './Alert.types';
+import type { AlertOptions, AlerType } from './Alert.types';
 
 export interface UseAlertComposableState {
+  /**
+   * Default alert option
+   */
+  defaultAlertOpt: Ref<AlertOptions>;
+
   /**
    * Iterated store of alerts
    */
@@ -46,12 +51,21 @@ export interface UseAlertComposableState {
 export const useAlert = createSharedComposable((): UseAlertComposableState => {
   const alerts = ref<AlertOptions[]>([]);
 
+  const defaultAlertOpt = ref<AlertOptions>({
+    id: `alert-'${Math.random()}`,
+    position: 'bottom-center',
+    message: '',
+    icon: undefined,
+    type: undefined,
+    timeout: 5000,
+  });
+
   /**
    * Trigger alert component
    * @param type type of alert (success, error, warning, info and default)
    * @param opt alert options(timeout, message and icon)
    */
-  function triggerAlert(type?: Alertype, opt?: Pick<AlertOptions, 'id' | 'icon' | 'message' | 'timeout'>): void {
+  function triggerAlert(type?: AlerType, opt?: Pick<AlertOptions, 'id' | 'icon' | 'message' | 'timeout'>): void {
     const alertIndex = alerts.value.findIndex((idx: AlertOptions) => idx.id === opt?.id);
 
     alerts.value.push({ type,
@@ -69,5 +83,6 @@ export const useAlert = createSharedComposable((): UseAlertComposableState => {
     warning: (opt?: Omit<AlertOptions, 'id'>) => triggerAlert('warning', opt),
     info: (opt?: Omit<AlertOptions, 'id'>) => triggerAlert('info', opt),
     alert: (opt?: Omit<AlertOptions, 'id'>) => triggerAlert('default', opt),
+    defaultAlertOpt,
   };
 });