diff --git a/tine20/Filemanager/js/DuplicateFileUploadDialog.js b/tine20/Filemanager/js/DuplicateFileUploadDialog.js
index 1cd2cea128d..4d3a6936e0e 100644
--- a/tine20/Filemanager/js/DuplicateFileUploadDialog.js
+++ b/tine20/Filemanager/js/DuplicateFileUploadDialog.js
@@ -6,6 +6,8 @@
  * @copyright   Copyright (c) 2021 Metaways Infosystems GmbH (http://www.metaways.de)
  */
 
+import {PersonaContainer, Personas} from "../../Tinebase/js/ux/vue/PersonaContainer";
+
 Ext.ns('Tine.Filemanager');
 
 Tine.Filemanager.DuplicateFileUploadDialog = Ext.extend(Ext.FormPanel, {
@@ -59,7 +61,7 @@ Tine.Filemanager.DuplicateFileUploadDialog = Ext.extend(Ext.FormPanel, {
         ];
         
         this.initButtons();
-        
+
         this.itemsName = this.id + '-radioItems';
         
         this.items = {
@@ -68,30 +70,25 @@ Tine.Filemanager.DuplicateFileUploadDialog = Ext.extend(Ext.FormPanel, {
             layoutConfig: {
                 align:'stretch'
             },
-            items : [
-                {
-                    border: false,
-                    html: '<div class="x-window-dlg"><div class="ext-mb-icon ext-mb-question"></div></div>',
-                    flex: 0,
-                    width: 45
+            items : [new PersonaContainer({
+                flex: 0,
+                persona: Personas.WARNING
+            }), {
+                border: false,
+                layout: 'vbox',
+                flex: 1,
+                layoutConfig: {
+                    align:'stretch'
                 },
-                {
-                    border: false,
-                    layout: 'vbox',
-                    flex: 1,
-                    layoutConfig: {
-                        align:'stretch'
-                    },
-                    items: [
-                        {
-                            xtype: 'label',
-                            border: false,
-                            cls: 'ext-mb-text',
-                            html: this.questionText
-                        }
-                    ]
-                }
-            ]
+                items: [
+                    {
+                        xtype: 'label',
+                        border: false,
+                        cls: 'ext-mb-text',
+                        html: this.questionText
+                    }
+                ]
+            }]
         };
         
         Tine.Filemanager.DuplicateFileUploadDialog.superclass.initComponent.call(this);
@@ -185,7 +182,7 @@ Tine.Filemanager.DuplicateFileUploadDialog.openWindow =  function (config) {
         closable: false,
         title: this.app.i18n._('Overwrite Existing File?'),
         width: config.width || 400,
-        height: config.height || 150,
+        height: Math.max(config.height || 150, 200),
         name: prototype.windowNamePrefix + Ext.id(),
         contentPanelConstructor: constructor,
         contentPanelConstructorConfig: config,
diff --git a/tine20/Tinebase/js/ExceptionDialog.js b/tine20/Tinebase/js/ExceptionDialog.js
index f2c2bd1146e..6b9da9ab203 100644
--- a/tine20/Tinebase/js/ExceptionDialog.js
+++ b/tine20/Tinebase/js/ExceptionDialog.js
@@ -9,6 +9,8 @@
 
 /*global Ext, Tine, window*/
 
+import { PersonaContainer, Personas } from "./ux/vue/PersonaContainer";
+
 Ext.ns('Tine', 'Tine.Tinebase');
  
  /**
@@ -131,7 +133,6 @@ Tine.Tinebase.ExceptionDialog = Ext.extend(Ext.Window, {
      */
     getReportForm: function () {
         this.initButtons();
-        
         this.reportForm = new Ext.FormPanel({
             id: 'tb-exceptiondialog-frompanel',
             bodyStyle: 'padding:5px;',
@@ -141,36 +142,59 @@ Tine.Tinebase.ExceptionDialog = Ext.extend(Ext.Window, {
             buttons: this.reportButtons,
             items: [{
                 xtype: 'panel',
+                layout: 'hbox',
                 border: false,
-                html: '<div class="tb-exceptiondialog-text">' + 
-                        '<p>' + i18n._('An error occurred, the program ended abnormal.') + '</p>' +
-                        '<p>' + i18n._('The last action you made was potentially not performed correctly.') + '</p>' +
-                        '<p>' + i18n._('Please help improving this software and notify the vendor. Include a brief description of what you where doing when the error occurred.') + '</p>' +
-                    '</div>'
-            }, {
-                id: 'tb-exceptiondialog-description',
-                height: 60,
-                xtype: 'textarea',
-                fieldLabel: i18n._('Description'),
-                name: 'description',
-                anchor: '95%',
-                readOnly: false
-            }, {
-                xtype: 'fieldset',
-                id: 'tb-exceptiondialog-send-contact',
-                anchor: '95%',
-                title: i18n._('Send Contact Information'),
-                autoHeight: true,
-                checkboxToggle: true,
-                items: [{
-                    id: 'tb-exceptiondialog-contact',
-                    xtype: 'textfield',
-                    hideLabel: true,
-                    anchor: '100%',
-                    name: 'contact',
-                    value: (this.currentAccount) ? this.currentAccount.accountFullName + ' ' + this.currentAccount.accountEmailAddress : 'unknown'
-                }]
-            }, {
+                layoutConfig: {
+                    align: 'stretchmax'
+                },
+                items: [
+                    new PersonaContainer({
+                        persona: Personas.ERROR_SEVERE,
+                        flex: 0,
+                        width: 100,
+                        height: 200
+                    }),
+                    {
+                        border: false,
+                        flex: 1,
+                        layout: 'form',
+                        items: [
+                            {
+                                xtype: 'panel',
+                                border: false,
+                                html: '<div class="tb-exceptiondialog-text">' +
+                                    '<p>' + i18n._('An error occurred, the program ended abnormal.') + '</p>' +
+                                    '<p>' + i18n._('The last action you made was potentially not performed correctly.') + '</p>' +
+                                    '<p>' + i18n._('Please help improving this software and notify the vendor. Include a brief description of what you where doing when the error occurred.') + '</p>' +
+                                    '</div>'
+                            }, {
+                                id: 'tb-exceptiondialog-description',
+                                height: 60,
+                                xtype: 'textarea',
+                                fieldLabel: i18n._('Description'),
+                                name: 'description',
+                                anchor: '95%',
+                                readOnly: false
+                            }, {
+                                xtype: 'fieldset',
+                                id: 'tb-exceptiondialog-send-contact',
+                                anchor: '95%',
+                                title: i18n._('Send Contact Information'),
+                                autoHeight: true,
+                                checkboxToggle: true,
+                                items: [{
+                                    id: 'tb-exceptiondialog-contact',
+                                    xtype: 'textfield',
+                                    hideLabel: true,
+                                    anchor: '100%',
+                                    name: 'contact',
+                                    value: (this.currentAccount) ? this.currentAccount.accountFullName + ' ' + this.currentAccount.accountEmailAddress : 'unknown'
+                                }]
+                            },
+                        ]
+                    }
+                ]
+            },{
                 xtype: 'panel',
                 width: '95%',
                 layout: 'form',
diff --git a/tine20/Tinebase/js/PasswordChangeDialog.js b/tine20/Tinebase/js/PasswordChangeDialog.js
index 1ccf82e2ce0..9bcdc23a470 100644
--- a/tine20/Tinebase/js/PasswordChangeDialog.js
+++ b/tine20/Tinebase/js/PasswordChangeDialog.js
@@ -6,8 +6,10 @@
  * @copyright   Copyright (c) 2010-2017 Metaways Infosystems GmbH (http://www.metaways.de)
  *
  */
- 
- Ext.ns('Tine', 'Tine.Tinebase');
+
+ // import {PersonaContainer, Personas} from "./ux/vue/PersonaContainer";
+
+Ext.ns('Tine', 'Tine.Tinebase');
  
  /**
   * @namespace  Tine.Tinebase
@@ -20,10 +22,10 @@ Tine.Tinebase.PasswordChangeDialog = Ext.extend(Ext.Window, {
     closeAction: 'close',
     modal: true,
     width: 350,
-    height: 350,
+    height: 230,
     minWidth: 350,
     minHeight: 230,
-    layout: 'fit',
+    layout: 'column',
     plain: true,
     title: null,
     // password or pin
@@ -38,8 +40,12 @@ Tine.Tinebase.PasswordChangeDialog = Ext.extend(Ext.Window, {
             this.passwordLabel,
             this.currentAccount.accountDisplayName
         );
-        
-        this.items = new Ext.FormPanel({
+        this.items = []
+        // const persona = new PersonaContainer({persona: Personas.QUESTION_CONFIRM, columnWidth: .2})
+        // this.items.push(persona)
+        this.items.push(new Ext.FormPanel({
+            // columnWidth: .8,
+            autoHeight: true,
             bodyStyle: 'padding:5px;',
             buttonAlign: 'right',
             labelAlign: 'top',
@@ -142,7 +148,7 @@ Tine.Tinebase.PasswordChangeDialog = Ext.extend(Ext.Window, {
                 },
                 scope: this
             }]
-        });
+        }));
         
         Tine.Tinebase.PasswordChangeDialog.superclass.initComponent.call(this);
     }
diff --git a/tine20/Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue b/tine20/Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue
new file mode 100644
index 00000000000..5d58c9de694
--- /dev/null
+++ b/tine20/Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue
@@ -0,0 +1,55 @@
+<!--
+/*
+ * Tine 2.0
+ *
+ * @license     http://www.gnu.org/licenses/agpl.html AGPL Version 3
+ * @author      Sohan Deshar <s.deshar@metaways.de>
+ * @copyright   Copyright (c) 2022-2023 Metaways Infosystems GmbH (http://www.metaways.de)
+ */
+-->
+<template>
+  <div v-html="rawSvg" class="dark-reverse vue-msg-box-svg-container" :style="`--skin-color: ${skinColor}`"></div>
+</template>
+
+<script setup>
+import { onBeforeMount, ref } from 'vue'
+
+import getIconPath from './helpers'
+
+const props = defineProps({
+  iconName: {
+    type: String,
+    required: true
+  },
+  skinColor: {
+    type: String,
+    required: false
+  }
+})
+
+const rawSvg = ref(null)
+const skinColor = ref(null)
+
+const skinShades = ['#ffffff', '#fad9b4', '#fcbf89', '#ec8f2e', '#d97103', '#b75b01', '#924500']
+const init = async function () {
+  const { default: img } = await import(/* webpackChunkName: "Tinebase/js/[request]" */`images/dialog-personas/${getIconPath(props.iconName)}.svg`)
+  skinColor.value = props.skinColor ? props.skinColor : skinShades[Math.floor(Math.random() * skinShades.length)]
+  rawSvg.value = window.atob(img.split(',')[1])
+}
+
+onBeforeMount(async () => {
+  await init()
+})
+</script>
+
+<style lang="scss">
+  .vue-msg-box-svg-container {
+    svg{
+      height: 100%;
+      width: auto;
+    }
+    .skin {
+      fill: var(--skin-color) !important;
+    }
+  }
+</style>
diff --git a/tine20/library/ExtJS/src/widgets/VueMessageBox/helpers.js b/tine20/Tinebase/js/ux/vue/PersonaContainer/helpers.js
similarity index 100%
rename from tine20/library/ExtJS/src/widgets/VueMessageBox/helpers.js
rename to tine20/Tinebase/js/ux/vue/PersonaContainer/helpers.js
diff --git a/tine20/Tinebase/js/ux/vue/PersonaContainer/index.js b/tine20/Tinebase/js/ux/vue/PersonaContainer/index.js
new file mode 100644
index 00000000000..9c5145c7cc0
--- /dev/null
+++ b/tine20/Tinebase/js/ux/vue/PersonaContainer/index.js
@@ -0,0 +1,45 @@
+Ext.ns("Tine.ux.vue")
+Ext.ns("Tine.personas")
+
+export const Personas = Object.freeze({
+    INFO : 'info_default',
+    INFO_INSTRUCTION: 'info_instruction',
+    INFO_FAILURE: 'info_failure',
+    INFO_SUCCESS: 'info_success',
+    INFO_WAIT: 'info_wait',
+
+    WARNING : 'warning',
+
+    QUESTION : 'question_default',
+    QUESTION_INPUT: 'question_input',
+    QUESTION_OPTION: 'question_option',
+    QUESTION_CONFIRM: 'question_confirm',
+    QUESTION_WARN: 'question_warn',
+
+    ERROR : 'error_default',
+    ERROR_MILD: 'error_mild',
+    ERROR_SEVERE: 'error_severe',
+})
+
+export const PersonaContainer = Ext.extend(Ext.BoxComponent, {
+    width: 100,
+    height: 200,
+    persona: Personas.INFO,
+
+    onRender: async function (ct, position){
+        Ext.BoxComponent.superclass.onRender.call(this, ct, position)
+        window.vue = window.vue || await import(/* webpackChunkName: "Tinebase/js/Vue-Runtime" */"tine-vue")
+        const { default: PersonaContainer } = await import("./PersonaContainer.vue")
+        this.app = vue.createApp(
+            PersonaContainer,
+            {
+                iconName: this.initialConfig.persona,
+                skinColor: this.initialConfig.skinColor
+            })
+        this.app.mount(`#${this.id}`)
+    },
+})
+
+Tine.personas = Personas
+Tine.ux.vue.PersonaContainer = PersonaContainer
+Ext.reg('vpersona', Tine.ux.vue.PersonaContainer)
diff --git a/tine20/library/ExtJS/src/widgets/VueMessageBox/mb-svg-loader.js b/tine20/Tinebase/js/ux/vue/PersonaContainer/mb-svg-loader.js
similarity index 100%
rename from tine20/library/ExtJS/src/widgets/VueMessageBox/mb-svg-loader.js
rename to tine20/Tinebase/js/ux/vue/PersonaContainer/mb-svg-loader.js
diff --git a/tine20/Tinebase/js/widgets/dialog/FileListDialog.js b/tine20/Tinebase/js/widgets/dialog/FileListDialog.js
index 8a258bc5e7c..9e171a7b7b8 100644
--- a/tine20/Tinebase/js/widgets/dialog/FileListDialog.js
+++ b/tine20/Tinebase/js/widgets/dialog/FileListDialog.js
@@ -1,3 +1,4 @@
+import {PersonaContainer, Personas} from "../../ux/vue/PersonaContainer";
 
 Ext.ns('Tine.widgets.dialog');
 
@@ -55,7 +56,7 @@ Ext.extend(Tine.widgets.dialog.FileListDialog, Ext.FormPanel, {
     initComponent: function() {
         // init buttons and tbar
         this.initButtons();
-        
+
         this.itemsName = this.id + '-fileListc';
         
         // get items for this dialog
@@ -65,7 +66,10 @@ Ext.extend(Tine.widgets.dialog.FileListDialog, Ext.FormPanel, {
             layoutConfig: {
                 align:'stretch'
             },
-            items: [{
+            items: [new PersonaContainer({
+                persona: Personas.WARNING,
+                flex: 0,
+            }),{
                 border: false,
                 layout: 'fit',
                 flex: 1,
@@ -131,7 +135,7 @@ Ext.extend(Tine.widgets.dialog.FileListDialog, Ext.FormPanel, {
 Tine.widgets.dialog.FileListDialog.openWindow = function (config) {
     var window = Tine.WindowFactory.getWindow({
         width: config.width || 400,
-        height: config.height || 150,
+        height: Math.max(config.height || 150, 200),
         closable: false,
         name: Tine.widgets.dialog.FileListDialog.windowNamePrefix + Ext.id(),
         contentPanelConstructor: 'Tine.widgets.dialog.FileListDialog',
diff --git a/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js b/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js
index d9fd12ab27b..2aa4fa93f1a 100644
--- a/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js
+++ b/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js
@@ -1,3 +1,4 @@
+import {PersonaContainer, Personas} from "../../ux/vue/PersonaContainer";
 
 Ext.ns('Tine.widgets.dialog');
 
@@ -54,11 +55,13 @@ Ext.extend(Tine.widgets.dialog.MultiOptionsDialog, Ext.FormPanel, {
     deferredRender: false,
     buttonAlign: null,
     bufferResize: 500,
+
+    persona: Personas.QUESTION_OPTION,
     
     initComponent: function() {
         // init buttons and tbar
         this.initButtons();
-        
+
         this.itemsName = this.id + '-radioItems';
         
         // get items for this dialog
@@ -68,12 +71,10 @@ Ext.extend(Tine.widgets.dialog.MultiOptionsDialog, Ext.FormPanel, {
             layoutConfig: {
                 align:'stretch'
             },
-            items: [{
-                border: false,
-                html: '<div class="x-window-dlg"><div class="ext-mb-icon ext-mb-question"></div></div>',
+            items: [new PersonaContainer({
+                persona: this.persona,
                 flex: 0,
-                width: 45
-            }, {
+            }), {
                 border: false,
                 layout: 'fit',
                 flex: 1,
@@ -209,7 +210,7 @@ Tine.widgets.dialog.MultiOptionsDialog.getOption = function(config) {
 Tine.widgets.dialog.MultiOptionsDialog.openWindow = function (config) {
     var window = Tine.WindowFactory.getWindow({
         width: config.width || 400,
-        height: config.height || 150,
+        height: Math.max(config.height || 150, 200),
         closable: false,
         name: Tine.widgets.dialog.MultiOptionsDialog.windowNamePrefix + Ext.id(),
         contentPanelConstructor: 'Tine.widgets.dialog.MultiOptionsDialog',
diff --git a/tine20/Tinebase/js/widgets/dialog/PasswordDialog.js b/tine20/Tinebase/js/widgets/dialog/PasswordDialog.js
index 622c578e6ce..1cdf4a6cb53 100644
--- a/tine20/Tinebase/js/widgets/dialog/PasswordDialog.js
+++ b/tine20/Tinebase/js/widgets/dialog/PasswordDialog.js
@@ -6,6 +6,8 @@
  * @copyright   Copyright (c) 2017 Metaways Infosystems GmbH (http://www.metaways.de)
  */
 
+import {PersonaContainer, Personas} from "../../ux/vue/PersonaContainer";
+
 Ext.ns('Tine.Tinebase.widgets.dialog');
 
 Tine.Tinebase.widgets.dialog.PasswordDialog = Ext.extend(Tine.Tinebase.dialog.Dialog, {
@@ -96,7 +98,10 @@ Tine.Tinebase.widgets.dialog.PasswordDialog = Ext.extend(Tine.Tinebase.dialog.Di
                         }
                     }], this.additionalFields
                 ]
-            }]
+            }, new PersonaContainer({
+                region: 'west',
+                persona: Personas.QUESTION_INPUT
+            })]
         }];
 
         if (this.questionText) {
@@ -194,10 +199,9 @@ Tine.Tinebase.widgets.dialog.PasswordDialog = Ext.extend(Tine.Tinebase.dialog.Di
             closeAction: 'close',
             modal: true,
             width: 400,
-            height: 130 +
-                (this.hasPwGen ? 20 : 0) +
-                (Math.ceil(this.questionText.length/70) * 20) + 
-                this.additionalFields.length * 30,
+            height: Math.max(130 +
+                (Math.ceil(this.questionText.length/70) * 20) +
+                this.additionalFields.length * 30, 200) + (this.hasPwGen ? 20 : 0),
             layout: 'fit',
             items: this
         }, config));
diff --git a/tine20/library/ExtJS/src/widgets/MessageBox.js b/tine20/library/ExtJS/src/widgets/MessageBox.js
index c54d1f3c203..059541372e1 100644
--- a/tine20/library/ExtJS/src/widgets/MessageBox.js
+++ b/tine20/library/ExtJS/src/widgets/MessageBox.js
@@ -45,7 +45,7 @@ Ext.MessageBox = function(){
     let opt, dlg;
 
     const skinShades = ["#ffffff", "#fad9b4", "#fcbf89", "#ec8f2e", "#d97103", "#b75b01", "#924500"]
-    
+
     const __HIDDEN = false // for readability and clarity
     let synchronousVisibilityState = __HIDDEN
     let initialized = false
@@ -247,6 +247,8 @@ Ext.Msg.show({
             synchronousVisibilityState = !__HIDDEN
             Ext.getBody().mask("Loading");
             const {MessageBoxApp, SymbolKeys} = await import(/* webpackChunkName: "Tinebase/js/VueMessageBox"*/'./VueMessageBox')
+            const {default: PersonaContainer } = await import(/* webpackChunkName: "Tinebase/js/PersonaContainer"*/'../../../../Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue')
+            const {BootstrapVueNext} = await import(/* webpackChunkName: "Tinebase/js/BootstrapVueNext"*/'bootstrap-vue-next')
 
             // initializing vue stuff
             if(!initialized){
@@ -270,6 +272,7 @@ Ext.Msg.show({
 
                 vueHandle.config.globalProperties.ExtEventBus = vueEmitter;
                 vueHandle.provide(SymbolKeys.ExtEventBusInjectKey, vueEmitter);
+                vueHandle.component('PersonaContainer', PersonaContainer)
                 vueHandle.use(BootstrapVueNext)
 
                 const mp = document.createElement("div");
@@ -287,7 +290,7 @@ Ext.Msg.show({
             if(!vueProps || !vueEmitter || !vueHandle) return
             // setting the prop values to the ones passed in config option
             // only those values are taken whose keys are present in the
-            // defaultOpt, as these are the only ones allowed
+            // defaultOpt as these are the only ones allowed
             Object.keys(opt).forEach(key => {
                 if(key in vueProps.opt){
                     vueProps.opt[key] = opt[key];
@@ -377,6 +380,8 @@ Ext.MessageBox.ERROR
                 modal:true,
                 minWidth: this.minProgressWidth,
                 waitConfig: config,
+                fn: 'fake',
+                icon: this.INFO_WAIT
             });
         },
 
diff --git a/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue b/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue
index 655fd86d8b9..03cd4e056b7 100644
--- a/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue
+++ b/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue
@@ -12,10 +12,10 @@
           @close="closeBox" :style="{'z-index': otherConfigs.zIndex}"
   >
     <template #default>
-      <div class="container" :style="`--skin-color: ${opt.skinColor}`">
+      <div class="container">
         <div class="row">
           <div class="col-3" v-if="props.opt.icon">
-            <div v-html="rawSvg" class="dark-reverse vue-msg-box-svg-container"></div>
+            <PersonaContainer :iconName="opt.icon" :skinColor="opt?.skinColor"/>
           </div>
           <div class="col">
             <div class="pb-1 mb-1">
@@ -55,9 +55,7 @@
 // TODO: change the progressBar according to `props.opt.waitConfig` if available
 // NOTE: Ext.MessageBox.wait is currently not used with any waitConfig, so
 // the implementation is not given top priority
-import {computed, inject, onBeforeMount, ref, watch, onMounted, onUpdated} from "vue"
-
-import getIconPath from "./helpers";
+import {computed, inject, onBeforeMount, ref, watch} from "vue"
 
 import {SymbolKeys} from ".";
 
@@ -69,13 +67,8 @@ const textAreaField = ref();
 const progressBarVisibility = ref(false);
 const textAreaHeight = ref(0);
 const textElValue = ref("");
-const rawSvg = ref()
 
 const init = async function () {
-  if (props.opt.icon) {
-    const {default: img} = await import(/* webpackChunkName: "Tinebase/js/[request]"*/`images/dialog-personas/${getIconPath(props.opt.icon)}.svg`)
-    rawSvg.value = window.atob(img.split(",")[1])
-  }
   if (props.opt.prompt) {
     if (props.opt.multiline) {
       textBoxElVisibility.value = false;
@@ -138,17 +131,7 @@ onBeforeMount(async () => {
 </script>
 
 <style lang="scss">
-.container {
-  --skin-color: #FFFFFF;
-}
-
 .vue-button.x-tool-close {
   background-image: none !important;
 }
-
-.vue-msg-box-svg-container {
-  .skin {
-    fill: var(--skin-color) !important;
-  }
-}
 </style>