diff --git a/src/resources/js/apps/App.vue b/src/resources/js/apps/App.vue
index 87ac80bc0..d3ceabb48 100644
--- a/src/resources/js/apps/App.vue
+++ b/src/resources/js/apps/App.vue
@@ -3,10 +3,18 @@
     <router-view v-if="verified && !keyIssue.invalid"></router-view>
     <badaso-loading-page v-else title="Verifying Badaso" />
     <badaso-license-blocker />
-    <vs-prompt :active.sync="loader" buttons-hidden :title="message" type="confirm" class="badaso-loader">
+    <badaso-prompt
+      :active.sync="loader"
+      buttons-hidden
+      :title="title"
+      type="confirm"
+      class="badaso-loader"
+      :color="color"
+      :headerColor="headerColor"
+    >
       <br />
-      <vs-progress indeterminate color="primary">primary</vs-progress>
-    </vs-prompt>
+      <vs-progress indeterminate :color="color">primary</vs-progress>
+    </badaso-prompt>
     <badaso-loader ref="loader" />
   </div>
 </template>
@@ -17,11 +25,15 @@ export default {
   components: {},
   data: () => ({
     loader: false,
-      message: "Loading",
+    title: "Loading",
+    color: "primary",
+    headerColor: null,
   }),
   methods: {
     openLoader(payload = null) {
-      this.message = payload ? payload.message : "Loading";
+      this.title = payload ? payload.title : "Loading";
+      this.color = payload ? payload.color : "primary";
+      this.headerColor = payload ? payload.headerColor : null;
       this.loader = true;
     },
     closeLoader() {
@@ -31,13 +43,13 @@ export default {
   computed: {
     getSelectedLocale: {
       get() {
-        return this.$store.getters['badaso/getSelectedLocale']
-      }
+        return this.$store.getters["badaso/getSelectedLocale"];
+      },
     },
     verified: {
       get() {
-        return this.$store.getters['badaso/isVerified']
-      }
+        return this.$store.getters["badaso/isVerified"];
+      },
     },
     keyIssue: {
       get() {
@@ -46,11 +58,11 @@ export default {
     },
   },
   mounted() {
-    this.$i18n.locale = this.getSelectedLocale.key
+    this.$i18n.locale = this.getSelectedLocale.key;
     this.$store.commit("badaso/FETCH_CONFIGURATION");
   },
   beforeMount() {
     this.$store.commit("badaso/VERIFY_BADASO");
-  }
+  },
 };
 </script>
diff --git a/src/resources/js/assets/scss/layout/_vs-modified.scss b/src/resources/js/assets/scss/layout/_vs-modified.scss
index 5d04e8272..f498cece7 100644
--- a/src/resources/js/assets/scss/layout/_vs-modified.scss
+++ b/src/resources/js/assets/scss/layout/_vs-modified.scss
@@ -244,4 +244,12 @@ th .vs-table-text {
   .vs-progress--indeterminate {
     background: $primary; 
   }
+}
+
+.vs-dialog-primary .vs-dialog .after {
+  background: $primary;
+}
+
+.vs-dialog-primary .vs-dialog .vs-dialog-header {
+  color: $primary;
 }
\ No newline at end of file
diff --git a/src/resources/js/components/BadasoLoader.vue b/src/resources/js/components/BadasoLoader.vue
deleted file mode 100644
index 9423aaf54..000000000
--- a/src/resources/js/components/BadasoLoader.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <vs-prompt :active.sync="loader" buttons-hidden :title="message" type="confirm">
-    <vs-progress indeterminate color="primary">primary</vs-progress>
-  </vs-prompt>
-</template>
-
-<script>
-export default {
-  name: "BadasoLoader",
-  data() {
-    return {
-      loader: false,
-      message: "Loading",
-    };
-  },
-  methods: {
-    openLoader(payload = null) {
-      this.message = payload ? payload.message : "Loading";
-      this.loader = true;
-    },
-    closeLoader() {
-      this.loader = false;
-    },
-  },
-};
-</script>
diff --git a/src/resources/js/components/BadasoPrompt.vue b/src/resources/js/components/BadasoPrompt.vue
new file mode 100644
index 000000000..238228bc1
--- /dev/null
+++ b/src/resources/js/components/BadasoPrompt.vue
@@ -0,0 +1,232 @@
+<template lang="html">
+  <transition name="dialog-t">
+    <div
+      v-if="isPrompt ? active : fActive"
+      ref="con"
+      :class="[`vs-dialog-${color}`]"
+      class="vs-component con-vs-dialog">
+      <div
+        class="vs-dialog-dark"
+        @click="handleClose($event,true)"/>
+      <div
+        ref="dialogx"
+        class="vs-dialog">
+
+        <!-- //header -->
+        <header
+          :style="styleHeader"
+          class="vs-dialog-header">
+          <div class="con-title-after">
+            <span
+              :style="styleAfter"
+              class="after"/>
+            <h3 class="dialog-title">{{ title }} </h3>
+          </div>
+          <vs-icon
+            v-if="type=='alert'"
+            :icon="closeIcon"
+            :icon-pack="iconPack"
+            class="vs-dialog-cancel vs-dialog-cancel--icon notranslate"
+            @click.native="handleClose"
+          />
+        </header>     <!-- // slots  -->
+        <div class="vs-dialog-text">
+          <slot/>
+          {{ text }}
+        </div>
+        <!-- footer buttons -->
+        <footer v-if="buttonsHidden?false:isPrompt||type=='confirm'">
+          <vs-button
+            :disabled="isValid=='none'?false:!isValid"
+            :color="color"
+            :type="buttonAccept"
+            class="vs-dialog-accept-button"
+            @click="acceptDialog">{{ acceptText }}</vs-button>
+          <vs-button
+            :text-color="'rgba(0,0,0,.5)'"
+            :type="buttonCancel"
+            class="vs-dialog-cancel-button"
+            @click="cancelClose">{{ cancelText }}</vs-button>
+        </footer>
+
+        <footer v-if="type=='alert'&&!isPrompt" >
+          <vs-button
+            :color="color"
+            :type="buttonAccept"
+            class="vs-dialog-accept-button"
+            @click="acceptDialog">{{ acceptText }}</vs-button>
+        </footer>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import _color from '../utils/color.js'
+export default {
+  name:'BadasoPrompt',
+  props:{
+    color:{
+      default:'primary',
+      type:String
+    },
+    active:{
+      default:false,
+      type: Boolean
+    },
+    buttonAccept:{
+      default:'filled',
+      type:String,
+    },
+    buttonCancel:{
+      default:'flat',
+      type:String,
+    },
+    isValid:{
+      default:'none',
+      type:[Boolean,String]
+    },
+    buttonsHidden:{
+      default:false,
+      type:Boolean
+    },
+    acceptText:{
+      default:'Accept',
+      type:String
+    },
+    cancelText:{
+      default:'Cancel',
+      type:String
+    },
+    iconPack:{
+      default:'material-icons',
+      type:String
+    },
+    closeIcon:{
+      default:'close',
+      type:String
+    },
+    text:{
+      default: null,
+      type: String
+    },
+    title:{
+      default: 'Dialog',
+      type: String
+    },
+    type:{
+      default: 'alert',
+      type: String
+    },
+    parent:{
+      default: null,
+    },
+    headerColor:{
+      default: null,
+    }
+  },
+  data:()=>({
+    isPrompt:true,
+    fActive: false,
+    parameters: null,
+  }),
+  computed:{
+    styleHeader(){
+      return {
+        color: _color.getColor(this.color,1),
+        background: this.headerColor ? this.headerColor : "#f8f8f8"
+      }
+    },
+    styleAfter(){
+      return {
+        background: _color.getColor(this.color,1)
+      }
+    }
+  },
+  watch:{
+    active() {
+      this.$nextTick(() => {
+        if (this.active) {
+          this.insertBody()
+        }
+      })
+    },
+    fActive() {
+      this.$nextTick(() => {
+        if (this.fActive) {
+          this.insertBody()
+        }
+      })
+    }
+  },
+  mounted () {
+    if (this.active && this.isPrompt) {
+      this.insertBody()
+    }
+    this.fActive = this.active
+  },
+  beforeDestroy() {
+    // close the left open prompt
+    let elx = this.$refs.con
+    let parentx = this.parent ? this.parent : document.body
+    if (elx) {
+      parentx.removeChild(elx)
+    }
+  },
+  methods:{
+    giveColor(color){
+      return _color.rColor(color)
+    },
+    acceptDialog () {
+      if(!this.isPrompt){
+        this.accept?this.accept(this.parameters):null
+        this.fActive = false
+        this.$emit('update:active',false)
+        this.$emit('accept', this.parameters)
+      } else {
+        if (this.isValid || this.isValid == 'none') {
+          this.accept?this.accept():null
+          this.fActive = false
+          this.$emit('update:active',false)
+          this.$emit('accept', this.parameters)
+        }
+      }
+    },
+    rebound(){
+      this.$refs.dialogx.classList.add('locked')
+      setTimeout( () => {
+        this.$refs.dialogx.classList.remove('locked')
+      }, 200);
+    },
+    handleClose(event,con){
+      if(con){
+        if(event.target.className.indexOf('vs-dialog-dark')!=-1 && this.type == 'alert'){
+          this.fActive = false
+          this.$emit('update:active',false)
+        } else if (event.target.className.indexOf('vs-dialog-dark')!=-1) {
+          this.rebound()
+        }
+      } else {
+        if(event?event.target.className.indexOf('vs-dialog-cancel')!=-1:event?event.target.className.indexOf('vs-dialog-cancel--icon')!=-1:false ){
+          this.fActive = false
+          this.$emit('update:active',false)
+        }
+      }
+      this.$emit('close')
+    },
+    cancelClose(){
+      this.fActive = false
+      this.$emit('update:active',false)
+      this.$emit('cancel')
+      // this.$emit('cancel')
+      this.cancel?this.cancel(this.parameters):null
+
+    },
+    insertBody(){
+      let elx = this.$refs.con
+      let parentx = this.parent ? this.parent : document.body
+      parentx.insertBefore(elx, parentx.firstChild)
+    },
+  },
+}
+</script>