diff --git a/tests/end_point_tests/endpoints.http b/tests/end_point_tests/endpoints.http
index 06320daa..b1f2c104 100644
--- a/tests/end_point_tests/endpoints.http
+++ b/tests/end_point_tests/endpoints.http
@@ -18,7 +18,7 @@ POST http://localhost:9600/load_discussion
 Content-Type: application/json
 
 {
-    "id": 0 // Discussion ID Must be integer
+    "id": 1 // Discussion ID Must be integer
 }
 ############################################
 ### Delete Discussion by ID
diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index baf92a90..7df32a17 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -86,13 +86,16 @@
 
                         </button>
                     </div>
+                    <div v-if="showPersonalities" class="container">
+                        <MountedPersonalitiesList ref="mountedPersList" :on-mount-unmount="onMountUnmountFun" />
+                    </div>
                     <!-- CHAT BOX -->
-                    <div class="flex flex-row flex-grow items-center gap-2 ">
-                        <!-- <div class="w-24">
-                            <MountedPersonalities  @click.stop=""/>
+                    <div class="flex flex-row flex-grow items-center gap-2 overflow-visible">
+                        <div class="w-fit">
+                            <MountedPersonalities ref="mountedPers" :onShowPersList="onShowPersListFun" />
+
+                        </div>
 
-                        </div> -->
-                       
 
                         <div class="relative grow">
                             <textarea id="chat" rows="1" v-model="message" title="Hold SHIFT + ENTER to add new line"
@@ -175,6 +178,7 @@ import { nextTick, TransitionGroup } from 'vue'
 import feather from 'feather-icons'
 import filesize from '../plugins/filesize'
 import MountedPersonalities from './MountedPersonalities.vue'
+import MountedPersonalitiesList from './MountedPersonalitiesList.vue'
 export default {
     name: 'ChatBox',
     emits: ["messageSentEvent", "stopGenerating"],
@@ -184,7 +188,8 @@ export default {
 
     },
     components: {
-        MountedPersonalities
+        MountedPersonalities,
+        MountedPersonalitiesList
     },
     setup() {
 
@@ -195,10 +200,19 @@ export default {
         return {
             message: "",
             fileList: [],
-            totalSize: 0
+            totalSize: 0,
+            showPersonalities: false
         }
     },
     methods: {
+        onShowPersListFun(comp) {
+            this.showPersonalities = comp.show
+
+        },
+        onMountUnmountFun(comp) {
+            console.log('mountunmount chat')
+            this.$refs.mountedPers.constructor()
+        },
         computedFileSize(size) {
             nextTick(() => {
                 feather.replace()
diff --git a/web/src/components/Message.vue b/web/src/components/Message.vue
index f30b5fe3..9e856f40 100644
--- a/web/src/components/Message.vue
+++ b/web/src/components/Message.vue
@@ -1,11 +1,35 @@
 <template>
     <div
-        class="group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex flex-col flex-grow flex-wrap overflow-x-hidden p-4 pb-2">
+        class="relative group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex flex-col flex-grow flex-wrap overflow-visible p-4 pb-2 ">
         <div class="flex flex-row  gap-2 ">
-            <div class="flex-shrink-0 ">
+            <div class=" flex-shrink-0">
                 <!-- AVATAR -->
-                <img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700">
+                <div class="group/avatar " >
+                    <img :src="getImgUrl()" @error="defaultImg($event)" :data-popover-target="'avatar' + message.id" data-popover-placement="bottom"
+                        class="w-10 h-10 rounded-full object-fill text-red-700">
+                        
+                        <!-- ADDITIONAL INFO -->
+                    <!-- <div data-popper :id="'avatar' + message.id"   role="tooltip"
+                        class=" -mx-2 absolute invisible rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel block  m-2 p-1 opacity-0 z-10  transition-opacity ease-in-out  duration-500 group-hover/avatar:visible group-hover/avatar:opacity-100 ">
+                        
+                        <div class="relative flex flex-row items-start">
+                            
+                            <img :src="getImgUrl()" @error="defaultImg($event)" class=" border-2 border-primary p-1 rounded-lg w-60 h-60" />
 
+                            <div class="flex flex-col justify-between p-4 leading-normal">
+                                <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy
+                                    technology acquisitions 2021</h5>
+                                <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise
+                                    technology acquisitions of 2021 so far, in reverse chronological order.</p>
+                            </div>
+                            
+                        </div>
+                     
+                    </div> -->
+                    
+                    
+                </div>
+                
             </div>
 
             <div class="flex flex-col w-full flex-grow-0 ">
@@ -325,17 +349,17 @@ export default {
             const endTime = new Date(Date.parse(this.message.finished_generating_at))
             //const spentTime = new Date(endTime - startTime)
             const same = endTime.getTime() === startTime.getTime();
-            if(same){
-                
+            if (same) {
+
                 return undefined
             }
 
-            if(!endTime.getTime()){
-                return undefined 
+            if (!endTime.getTime()) {
+                return undefined
             }
             let timeDiff = endTime.getTime() - startTime.getTime();
 
-            
+
             const hours = Math.floor(timeDiff / (1000 * 60 * 60));
 
             timeDiff -= hours * (1000 * 60 * 60);
@@ -364,8 +388,8 @@ export default {
             // let m = addZero(spentTime.getMinutes());
             // let s = addZero(spentTime.getSeconds());
             const time = addZero(hours) + "h:" + addZero(mins) + "m:" + addZero(secs) + 's';
-            
-            
+
+
             return time
 
 
diff --git a/web/src/components/MountedPersonalities.vue b/web/src/components/MountedPersonalities.vue
index c3c9227f..cabb7e33 100644
--- a/web/src/components/MountedPersonalities.vue
+++ b/web/src/components/MountedPersonalities.vue
@@ -1,37 +1,24 @@
 <template>
     <!-- LIST OF MOUNTED PERSONALITIES -->
-    <div
-        class=" text-base font-semibold cursor-pointer select-none items-center flex flex-row overflow-visible overflow-x-auto scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
-        <!-- LIST -->
-        <div class="flex -space-x-4 items-center ">
-            <!-- ITEM -->
-            <div class="relative  hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
-                v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name">
-                <div class="group items-center flex flex-row">
-                    <button @click.stop="onPersonalitySelected(item)">
 
-                        <img :src="bUrl + item.avatar" @error="personalityImgPlacehodler"
-                            class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary "
-                            :class="configFile.active_personality_id == configFile.personalities.indexOf(item.full_path) ? 'border-secondary' : 'border-transparent z-0'"
-                            :title="item.name">
-                    </button>
-                    <button @click.stop="onPersonalityMounted(item)">
 
-                        <span
-                            class="hidden group-hover:block top-0 left-7 absolute active:scale-90 bg-bg-light dark:bg-bg-dark rounded-full border-2  border-transparent"
-                            title="Unmount personality">
-                            <!-- UNMOUNT BUTTON -->
-                            <svg aria-hidden="true" class="w-4 h-4 text-red-600 hover:text-red-500 " fill="currentColor"
-                                viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                                <path fill-rule="evenodd"
-                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                                    clip-rule="evenodd"></path>
-                            </svg>
+    <div class="w-fit select-none">
 
-                        </span>
-                    </button>
-                </div>
-            </div>
+
+        <div class="flex -space-x-4 " v-if="mountedPersArr.length > 1">
+
+
+            <img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
+                class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary  border-secondary"
+                :title="mountedPers.name" >
+
+            <div class="flex items-center justify-center w-8 h-8 cursor-pointer text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800"
+                @click.stop="toggleShowPersList" title="Click to show more">+{{ mountedPersArr.length - 1 }}</div>
+        </div>
+        <div class="flex -space-x-4 " v-if="mountedPersArr.length == 1">
+            <img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
+                class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary cursor-pointer  border-secondary"
+                :title="mountedPers.name" @click.stop="toggleShowPersList" >
         </div>
 
     </div>
@@ -40,12 +27,16 @@
 <script>
 import axios from "axios";
 import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
+import { nextTick } from "vue";
 
 const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
 axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
 export default {
     name: 'MountedPersonalities',
-    setup() {
+    props: {
+        onShowPersList: Function,
+    },
+    data() {
 
 
         return {
@@ -54,7 +45,9 @@ export default {
             personalities: [],
             bUrl: bUrl,
             isMounted: false,
-            isLoading:false
+            mountedPers: {},
+            show: false
+
         }
     },
     async mounted() {
@@ -68,17 +61,21 @@ export default {
 
     },
     methods: {
+        toggleShowPersList() {
+            this.show = !this.show
+            this.onShowPersList(this)
+        },
         async constructor() {
+            
             this.configFile = await this.api_get_req("get_config")
+            this.getPersonalitiesArr()
             let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
             this.configFile.personality_language = personality_path_infos["personality_language"]
             this.configFile.personality_category = personality_path_infos["personality_category"]
             this.configFile.personality_folder = personality_path_infos["personality_name"]
 
-            await this.getPersonalitiesArr().then(() => {
-                this.getMountedPersonalities()
-                this.$forceUpdate()
-            })
+
+            
         },
         async api_get_req(endpoint) {
             try {
@@ -97,7 +94,7 @@ export default {
 
         },
         async getPersonalitiesArr() {
-            this.isLoading = true
+
             this.personalities = []
             const dictionary = await this.api_get_req("get_all_personalities")
             const config = await this.api_get_req("get_config")
@@ -140,10 +137,13 @@ export default {
             }
 
             this.personalities.sort((a, b) => a.name.localeCompare(b.name))
-            this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
-            this.personalitiesFiltered.sort()
 
-            this.isLoading = false
+
+       
+                this.getMountedPersonalities()
+                nextTick(()=>{
+                  
+                })
 
         },
         personalityImgPlacehodler(event) {
@@ -168,14 +168,14 @@ export default {
 
             }
 
-            this.isLoading = true
+
         },
         async onPersonalitySelected(pers) {
             // eslint-disable-next-line no-unused-vars
             if (this.isLoading) {
                 this.$refs.toast.showToast("Loading... please wait", 4, false)
             }
-            this.isLoading = true
+
             console.log('ppa', pers)
             if (pers) {
 
@@ -204,7 +204,7 @@ export default {
                 }
 
 
-                this.isLoading = false
+
             }
 
         },
@@ -241,9 +241,9 @@ export default {
 
 
             try {
-                this.isLoading = true
+
                 const res = await axios.post('/unmount_personality', obj);
-                this.isLoading = false
+
 
                 if (res) {
                     return res.data
@@ -283,7 +283,7 @@ export default {
 
         },
         async mountPersonality(pers) {
-            this.isLoading = true
+
             console.log('mount pers', pers)
             if (!pers) { return }
 
@@ -310,11 +310,11 @@ export default {
                 pers.isMounted = false
                 this.$refs.toast.showToast("Could not mount personality\nError: " + res.error, 4, false)
             }
-            this.isLoading = false
+
 
         },
         async unmountPersonality(pers) {
-            this.isLoading = true
+
             if (!pers) { return }
 
             const res = await this.unmount_personality(pers.personality || pers)
@@ -359,7 +359,7 @@ export default {
                 this.$refs.toast.showToast("Could not unmount personality\nError: " + res.error, 4, false)
             }
 
-            this.isLoading = false
+
         },
         getMountedPersonalities() {
 
@@ -382,7 +382,9 @@ export default {
             this.mountedPersArr = mountedPersArr
             //this.mountedPersArr = mountedPersArr
             console.log('getMountedPersonalities', mountedPersArr)
-            console.log('fig', this.configFile.personality_category)
+            console.log('fig', this)
+
+            this.mountedPers = this.personalities[this.personalities.findIndex(item => item.full_path == this.configFile.personalities[this.configFile.active_personality_id])]
 
         },
     }
diff --git a/web/src/components/MountedPersonalitiesList.vue b/web/src/components/MountedPersonalitiesList.vue
new file mode 100644
index 00000000..00962d56
--- /dev/null
+++ b/web/src/components/MountedPersonalitiesList.vue
@@ -0,0 +1,473 @@
+<template>
+    <!-- LIST OF MOUNTED PERSONALITIES -->
+    <div
+        class="text-left overflow-visible text-base font-semibold cursor-pointer select-none items-center flex flex-row overflow-x-auto -my-2 pr-2 scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
+        <!-- LIST -->
+        <div v-if="mountedPersArr.length > 0" class="m-2">
+            <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                Mounted Personalities: ({{ mountedPersArr.length }})
+            </label>
+            <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-1 md:grid-cols-1 gap-4 max-h-96">
+                <TransitionGroup name="bounce">
+                    <personality-entry ref="personalitiesZoo" v-for="(pers, index) in mountedPersArr"
+                        :key="'index-' + index + '-' + pers.name" :personality="pers" :full_path="pers.full_path"
+                        :selected="configFile.personalities[configFile.active_personality_id] === pers.full_path"
+                        :on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted"
+                        :on-settings="onSettingsPersonality" />
+                </TransitionGroup>
+            </div>
+        </div>
+
+
+
+        <Toast ref="toast">
+        </Toast>
+        <UniversalForm ref="universalForm" class="z-20" />
+    </div>
+</template>
+<style scoped>
+.bounce-enter-active {
+    animation: bounce-in 0.5s;
+}
+
+.bounce-leave-active {
+    animation: bounce-in 0.5s reverse;
+}
+
+@keyframes bounce-in {
+    0% {
+        transform: scale(0);
+    }
+
+    50% {
+        transform: scale(1.25);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+</style>
+<script >
+import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
+import PersonalityEntry from './PersonalityEntry.vue'
+import Toast from './Toast.vue'
+import UniversalForm from './UniversalForm.vue';
+
+
+import axios from "axios";
+
+const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
+axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
+export default {
+    props: {
+        onMountUnmount: Function
+
+
+    },
+    components: {
+        PersonalityEntry,
+        Toast,
+        UniversalForm,
+    },
+    name: 'MountedPersonalitiesList',
+    data() {
+
+
+        return {
+            configFile: {},
+            mountedPersArr: [],
+            personalities: [],
+            bUrl: bUrl,
+            isMounted: false,
+            isLoading: false
+        }
+    },
+    async mounted() {
+        await this.constructor()
+        this.isMounted = true
+    },
+    async activated() {
+        if (this.isMounted) {
+            await this.constructor()
+        }
+
+    },
+    methods: {
+        toggleMountUnmount() {
+            console.log('moununmoun pers list')
+            this.onMountUnmount(this)
+        },
+        async constructor() {
+
+            this.configFile = await this.api_get_req("get_config")
+            this.getPersonalitiesArr()
+            let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
+            this.configFile.personality_language = personality_path_infos["personality_language"]
+            this.configFile.personality_category = personality_path_infos["personality_category"]
+            this.configFile.personality_folder = personality_path_infos["personality_name"]
+
+
+        },
+        async api_get_req(endpoint) {
+            try {
+                const res = await axios.get("/" + endpoint);
+
+                if (res) {
+
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error.message, 'api_get_req - mountedPersonalities')
+                return
+            }
+
+
+        },
+        async getPersonalitiesArr() {
+
+            this.personalities = []
+            const dictionary = await this.api_get_req("get_all_personalities")
+            const config = await this.api_get_req("get_config")
+            //this.configFile=config
+            //console.log('asdas',config)
+            // console.log("all_personalities")
+            // console.log(dictionary)
+            const langkeys = Object.keys(dictionary); // returns languages folder names
+            for (let i = 0; i < langkeys.length; i++) {
+                const langkey = langkeys[i];
+                const catdictionary = dictionary[langkey];
+                const catkeys = Object.keys(catdictionary); // returns categories
+
+                for (let j = 0; j < catkeys.length; j++) {
+                    const catkey = catkeys[j];
+                    const personalitiesArray = catdictionary[catkey];
+                    const modPersArr = personalitiesArray.map((item) => {
+
+                        const isMounted = config.personalities.includes(langkey + '/' + catkey + '/' + item.folder)
+                        // if (isMounted) {
+                        //     console.log(item)
+                        // }
+                        let newItem = {}
+                        newItem = item
+                        newItem.category = catkey // add new props to items
+                        newItem.language = langkey // add new props to items
+                        newItem.full_path = langkey + '/' + catkey + '/' + item.folder // add new props to items
+                        newItem.isMounted = isMounted // add new props to items
+                        return newItem
+                    })
+
+
+                    if (this.personalities.length == 0) {
+                        this.personalities = modPersArr
+                    } else {
+                        this.personalities = this.personalities.concat(modPersArr)
+                    }
+                }
+
+            }
+
+            this.personalities.sort((a, b) => a.name.localeCompare(b.name))
+            // this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
+            // this.personalitiesFiltered.sort()
+
+
+
+            this.getMountedPersonalities()
+
+
+        },
+        personalityImgPlacehodler(event) {
+            event.target.src = defaultPersonalityImgPlaceholder
+        },
+        onPersonalityMounted(persItem) {
+
+            if (this.configFile.personalities.includes(persItem.full_path)) {
+                //this.$refs.toast.showToast("Personality already mounted", 4, false)
+                //return
+                //persItem.ismounted = false
+                if (this.configFile.personalities.length == 1) {
+                    this.$refs.toast.showToast("Can't unmount last personality", 4, false)
+
+                } else {
+                    this.unmountPersonality(persItem)
+
+                }
+            } else {
+                //persItem.ismounted = true
+                this.mountPersonality(persItem)
+
+            }
+
+
+        },
+        async onPersonalitySelected(pers) {
+            // eslint-disable-next-line no-unused-vars
+
+            console.log('ppa', pers)
+            if (pers) {
+
+                if (pers.selected) {
+                    this.$refs.toast.showToast("Personality already selected", 4, true)
+                    return
+                }
+
+
+
+
+                if (pers.isMounted) {
+
+                    const res = await this.select_personality(pers)
+                    if (res) {
+                        if (res.status) {
+                            await this.constructor()
+
+                            this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true)
+                            console.log('ssss', this.configFile)
+                        }
+                    }
+
+
+                } else {
+                    this.onPersonalityMounted(pers)
+
+                }
+
+
+
+            }
+
+        },
+        onSettingsPersonality(persEntry) {
+            try {
+
+                axios.get('/get_active_personality_settings').then(res => {
+
+                    if (res) {
+
+                        console.log('pers sett', res)
+                        if (res.data && Object.keys(res.data).length > 0) {
+
+                            this.$refs.universalForm.showForm(res.data, "Personality settings - " + persEntry.personality.name, "Save changes", "Cancel").then(res => {
+
+                                // send new data
+                                try {
+                                    axios.post('/set_active_personality_settings',
+                                        res).then(response => {
+
+                                            if (response && response.data) {
+                                                console.log('personality set with new settings', response.data)
+                                                this.$refs.toast.showToast("Personality settings updated successfully!", 4, true)
+
+                                            } else {
+                                                this.$refs.toast.showToast("Did not get Personality settings responses.\n" + response, 4, false)
+
+                                            }
+
+
+                                        })
+                                } catch (error) {
+                                    this.$refs.toast.showToast("Did not get Personality settings responses.\n Endpoint error: " + error.message, 4, false)
+
+                                }
+
+                            })
+                        } else {
+                            this.$refs.toast.showToast("Personality has no settings", 4, false)
+
+                        }
+
+                    }
+                })
+
+            } catch (error) {
+
+                this.$refs.toast.showToast("Could not open personality settings. Endpoint error: " + error.message, 4, false)
+            }
+
+        },
+        async mount_personality(pers) {
+            if (!pers) { return { 'status': false, 'error': 'no personality - mount_personality' } }
+
+            try {
+                const obj = {
+                    language: pers.language,
+                    category: pers.category,
+                    folder: pers.folder
+                }
+                const res = await axios.post('/mount_personality', obj);
+
+                if (res) {
+
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error.message, 'mount_personality - settings')
+                return
+            }
+
+        },
+        async unmount_personality(pers) {
+            if (!pers) { return { 'status': false, 'error': 'no personality - unmount_personality' } }
+
+            const obj = {
+                language: pers.language,
+                category: pers.category,
+                folder: pers.folder
+            }
+
+
+            try {
+
+                const res = await axios.post('/unmount_personality', obj);
+
+
+                if (res) {
+
+                    return res.data
+                }
+            } catch (error) {
+                console.log(error.message, 'unmount_personality - settings')
+                return
+            }
+
+        },
+        async select_personality(pers) {
+            if (!pers) { return { 'status': false, 'error': 'no personality - select_personality' } }
+            console.log('select pers', pers)
+            const id = this.configFile.personalities.findIndex(item => item === pers.full_path)
+
+            const obj = {
+                id: id
+            }
+
+
+            try {
+                const res = await axios.post('/select_personality', obj);
+
+                if (res) {
+                    this.toggleMountUnmount()
+                    this.configFile = await this.api_get_req("get_config")
+                    let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
+                    this.configFile.personality_language = personality_path_infos["personality_language"]
+                    this.configFile.personality_category = personality_path_infos["personality_category"]
+                    this.configFile.personality_folder = personality_path_infos["personality_name"]
+
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error, 'select_personality - settings')
+                return
+            }
+
+        },
+        async mountPersonality(pers) {
+
+            console.log('mount pers', pers)
+            if (!pers) { return }
+
+            if (this.configFile.personalities.includes(pers.personality.full_path)) {
+                this.$refs.toast.showToast("Personality already mounted", 4, false)
+                return
+            }
+
+            const res = await this.mount_personality(pers.personality)
+            console.log('mount_personality res', res)
+
+            if (res.status) {
+                this.configFile.personalities = res.personalities
+                this.$refs.toast.showToast("Personality mounted", 4, true)
+                pers.isMounted = true
+                this.toggleMountUnmount()
+                const res2 = await this.select_personality(pers.personality)
+                if (res2.status) {
+                    this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
+
+                }
+                this.getMountedPersonalities()
+            } else {
+                pers.isMounted = false
+                this.$refs.toast.showToast("Could not mount personality\nError: " + res.error, 4, false)
+            }
+
+
+        },
+        async unmountPersonality(pers) {
+
+            if (!pers) { return }
+
+            const res = await this.unmount_personality(pers.personality || pers)
+
+
+            if (res.status) {
+                this.toggleMountUnmount()
+                console.log('unmount response', res)
+                this.configFile.active_personality_id = res.active_personality_id
+                this.configFile.personalities = res.personalities
+                this.$refs.toast.showToast("Personality unmounted", 4, true)
+
+                const activePersPath = this.configFile.personalities[this.configFile.active_personality_id]
+
+                console.log()
+                const persId = this.personalities.findIndex(item => item.full_path == activePersPath)
+                //const persFilteredId = this.personalitiesFiltered.findIndex(item => item.full_path == pers.full_path)
+                //const persIdZoo = this.$refs.personalitiesZoo.findIndex(item => item.full_path == pers.full_path)
+                console.log('ppp', this.personalities[persId])
+                const activePers = this.personalities[persId]
+                activePers.isMounted = false
+                activePers.selected = true
+                //this.$refs.personalitiesZoo[persIdZoo].isMounted = false
+
+
+
+                //pers.isMounted = false
+                this.getMountedPersonalities()
+                // Select some other personality
+                //const lastPers = this.mountedPersArr[this.mountedPersArr.length - 1]
+
+                //console.log(lastPers, this.mountedPersArr.length)
+                // const res2 = await this.select_personality(lastPers.personality)
+                const res2 = await this.select_personality(activePers)
+                if (res2.status) {
+                    this.$refs.toast.showToast("Selected personality:\n" + activePers.name, 4, true)
+
+                }
+
+
+            } else {
+                this.$refs.toast.showToast("Could not unmount personality\nError: " + res.error, 4, false)
+            }
+
+
+        },
+        getMountedPersonalities() {
+
+            let mountedPersArr = []
+            console.log(this.configFile.personalities.length)
+            // console.log('perrs listo',this.personalities)
+            for (let i = 0; i < this.configFile.personalities.length; i++) {
+                const full_path_item = this.configFile.personalities[i]
+                const index = this.personalities.findIndex(item => item.full_path == full_path_item)
+
+                const pers = this.personalities[index]
+                if (pers) {
+                    mountedPersArr.push(pers)
+                }
+                else {
+                    mountedPersArr.push(this.personalities[this.personalities.findIndex(item => item.full_path == "english/generic/lollms")])
+                }
+            }
+            this.mountedPersArr = []
+            this.mountedPersArr = mountedPersArr
+            //this.mountedPersArr = mountedPersArr
+            console.log('getMountedPersonalities', mountedPersArr)
+            console.log('fig', this.configFile)
+
+        },
+    }
+}
+</script>
+
diff --git a/web/src/components/PersonalityEntry.vue b/web/src/components/PersonalityEntry.vue
index f11e00a0..da6856c9 100644
--- a/web/src/components/PersonalityEntry.vue
+++ b/web/src/components/PersonalityEntry.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer  active:scale-95 duration-75 select-none"
-    @click.stop="toggleSelected" :class="selected ? 'border-primary-light' : 'border-transparent'"
+    class=" min-w-96 items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer  active:scale-95 duration-75 select-none"
+    @click.stop="toggleSelected" :class="selected_computed ? 'border-primary-light' : 'border-transparent'"
     :title="!personality.installed ? 'Not installed' : ''">
 
     <div :class="!personality.installed ? 'opacity-50' : ''">
@@ -24,7 +24,7 @@
             <i data-feather="slash" class="w-5"></i>
             <span class="sr-only">Not installed</span>
           </button>
-          <button v-if="selected" type="button" title="Settings"
+          <button v-if="selected_computed" type="button" title="Settings"
             class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
             @click.stop="toggleSettings">
             <i data-feather="sliders" class="w-5"></i>
@@ -112,7 +112,9 @@ export default {
     })
   },
   computed: {
-
+selected_computed(){
+  return this.selected
+}
   },
   methods: {
     getImgUrl() {
diff --git a/web/src/main.js b/web/src/main.js
index a2486d85..e7c24057 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -12,7 +12,7 @@ const store = createStore({
     state () {
       return {
         // count: 0,
-        mountedPersonalities: {},
+        mountedPersonalities: [],
         settingsChanged:false
       }
     },
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index a3d87082..745e45b6 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -189,7 +189,7 @@
 
             </div>
             <div class=" bottom-0 container flex flex-row items-center justify-center " v-if="currentDiscussion.id">
-                <ChatBox ref="chatBox" @messageSentEvent="sendMsg" :loading="isGenerating" @stopGenerating="stopGenerating">
+                <ChatBox ref="chatBox" @messageSentEvent="sendMsg" :loading="isGenerating" :discussionList="list" @stopGenerating="stopGenerating">
                 </ChatBox>
             </div>
             <!-- CAN ADD FOOTER PANEL HERE -->
@@ -625,7 +625,7 @@ export default {
             // "message":message,#markdown.markdown(message),
             // "user_message_id": self.current_user_message_id,
             // "ai_message_id": self.current_ai_message_id,
-            console.log(msgObj);
+            console.log('create bot', msgObj);
             if (msgObj["status"] == "generation_started") {
                 this.updateLastUserMsg(msgObj)
                 // Create response message
@@ -706,7 +706,7 @@ export default {
         },
         streamMessageContent(msgObj) {
             // Streams response message content from binding
-            //console.log('stream msg',msgObj)
+            console.log('stream msg',msgObj)
             const parent = msgObj.user_message_id
             const discussion_id = msgObj.discussion_id
             this.setDiscussionLoading(discussion_id, true);
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 06ed8e14..bf0bfbbc 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1291,7 +1291,7 @@ export default {
                 if (pers.isMounted && this.configFile.personalities.includes(pers.personality.full_path)) {
 
                     const res = await this.select_personality(pers)
-
+                    console.log('pers is mounted',res)
                     if (res && res.status && res.active_personality_id > -1) {
                         this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true)
 
@@ -1301,6 +1301,7 @@ export default {
                     this.isLoading = false
 
                 } else {
+                    console.log('mounting pers')
                     this.onPersonalityMounted(pers)
 
                 }