diff --git a/web/src/components/ModelEntry.vue b/web/src/components/ModelEntry.vue
index 5f986a4f..152ef574 100644
--- a/web/src/components/ModelEntry.vue
+++ b/web/src/components/ModelEntry.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg">
+  <div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer" @click.stop="toggleSelected"  :class="selected?' border-primary-light':'border-transparent'">
     <div class="flex-shrink-0">
       <i :class="`fas ${icon} text-xl`"></i>
     </div>
@@ -7,20 +7,27 @@
       <h3 class="font-bold text-lg">
         {{ title }}
       </h3>
-      <a :href="path" title="Download this manually (faster) and put it in the models/<your backend> folder then refresh">{{ title }}</a>
+      <div @click.stop class="flex flex-shrink-0">
+
+     
+      <a :href="path"
+      class="flex hover:text-secondary duration-75 active:scale-90"
+        title="Download this manually (faster) and put it in the models/<your backend> folder then refresh">
+          
+          <i data-feather="link" class="w-5 p-1"></i>
+          {{ title }}
+        </a>
+      </div>
       <p class="opacity-80">{{ description }}</p>
     </div>
     <div class="flex-shrink-0">
-      <button
-        class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
+      <button class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
         :class="[isInstalled ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600']"
-        :disabled="installing || uninstalling"
-        @click="toggleInstall"
-      >
+        :disabled="installing || uninstalling" @click.stop="toggleInstall">
         <template v-if="installing">
           <div class="flex items-center space-x-2">
             <div class="h-2 w-20 bg-gray-300 rounded">
-              <div :style="{ width: progress + '%'}" class="h-full bg-red-500 rounded"></div>
+              <div :style="{ width: progress + '%' }" class="h-full bg-red-500 rounded"></div>
             </div>
             <span>Installing...{{ Math.floor(progress) }}%</span>
           </div>
@@ -42,7 +49,8 @@
 </template>
 
 <script>
-import socket from '@/services/websocket.js'
+import { nextTick } from 'vue'
+import feather from 'feather-icons'
 export default {
   props: {
     title: String,
@@ -62,6 +70,13 @@ export default {
       uninstalling: false
     };
   },
+  mounted() {
+    nextTick(() => {
+      feather.replace()
+
+
+    })
+  },
   methods: {
     toggleInstall() {
       if (this.isInstalled) {
@@ -74,6 +89,9 @@ export default {
 
       }
     },
+    toggleSelected(){
+      this.onSelected(this)
+    },
     handleSelection() {
       if (this.isInstalled && !this.selected) {
         this.onSelected(this);
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 5136b8bc..0652f3e8 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="container overflow-y-scroll flex flex-col no-scrollbar shadow-lg p-10 pt-0 ">
         <!-- CONTROL PANEL -->
-        <div class="sticky top-0 z-10 flex flex-row mb-2 p-3 gap-3 w-full rounded-b-lg bg-bg-light-tone dark:bg-bg-dark-tone  shadow-lg">
+        <div
+            class="sticky top-0 z-10 flex flex-row mb-2 p-3 gap-3 w-full rounded-b-lg bg-bg-light-tone dark:bg-bg-dark-tone  shadow-lg">
             <!-- SAVE CONFIG -->
             <div v-if="showConfirmation" class="flex gap-3 flex-1 items-center duration-75">
                 <button class="text-2xl hover:text-red-600 duration-75 active:scale-90 " title="Cancel" type="button"
@@ -23,21 +24,22 @@
                     @click="reset_configuration()">
                     <i data-feather="refresh-ccw"></i>
                 </button>
-                <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Collapse / Expand all panels"
-                    type="button" @click.stop="all_collapsed=!all_collapsed">
+                <button class="text-2xl hover:text-secondary duration-75 active:scale-90"
+                    title="Collapse / Expand all panels" type="button" @click.stop="all_collapsed = !all_collapsed">
                     <i data-feather="list"></i>
                 </button>
             </div>
             <div class="m-2">
-                    <button @click="applyConfiguration" class="bg-blue-500 text-white py-2 px-4 rounded">
-                        Apply Configuration
-                    </button>
-                    <div v-if="isLoading" class="loader"></div>
-            </div>                      
+                <button @click="applyConfiguration" class="bg-blue-500 text-white py-2 px-4 rounded">
+                    Apply Configuration
+                </button>
+                <div v-if="isLoading" class="loader"></div>
+            </div>
 
         </div>
         <!-- BACKEND -->
-        <div
+        <!-- DISABLED FOR NOW -->
+        <!-- <div
             class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
             <div class="flex flex-row ">
                 <button @click.stop="bec_collapsed = !bec_collapsed"
@@ -62,46 +64,59 @@
                     <label for="model" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                         Model:
                     </label>
-                    <select id="model" @change="update_model($event.target.value)" @mouseup="update_model($event.target.value)" 
+                    <select id="model" @change="update_model($event.target.value)"
+                        @mouseup="update_model($event.target.value)"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
 
                         <option v-for="item in modelsArr" :selected="item === configFile.model">{{ item }}</option>
 
                     </select>
-                </div>          
+                </div>
             </div>
-        </div>
+        </div> -->
         <div
             class="flex flex-col mb-2  rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
             <div class="flex flex-row p-3">
                 <button @click.stop="mzc_collapsed = !mzc_collapsed"
-                class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
+                    class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
                     <i :data-feather="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
                     <h3 class="text-lg font-semibold cursor-pointer select-none">
-                        Models zoo</h3>
+                        Models configuration</h3>
                 </button>
             </div>
             <div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
+                <div class="mx-2 mb-4">
+                    <label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                        Backend:
+                    </label>
+                    <select id="backend" @change="update_backend($event.target.value)"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                        <option v-for="item in backendsArr" :selected="item === configFile.backend">{{ item }}</option>
+                    </select>
+                </div>
                 <div v-if="models.length > 0" class="mb-2">
                     <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                        Install more models:
+                        Models:
                     </label>
-                    <div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0" :class="mzl_collapsed ? '':'max-h-96'">
+                    <div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0"
+                        :class="mzl_collapsed ? '' : 'max-h-96'">
                         <model-entry v-for="(model, index) in models" :key="index" :title="model.title" :icon="model.icon"
                             :path="model.path" :description="model.description" :is-installed="model.isInstalled"
-                            :on-install="onInstall"
-                            :on-uninstall="onUninstall"
-                            :on-selected="onSelected" />
+                            :on-install="onInstall" :on-uninstall="onUninstall" :on-selected="onSelected"
+                            :selected="model.title === configFile.model" />
                     </div>
                 </div>
-                 <!-- EXPAND / COLLAPSE BUTTON -->
-                <button v-if="mzl_collapsed" class="text-2xl hover:text-secondary duration-75 flex justify-center  hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg " title="Collapse"
-                    type="button" @click="mzl_collapsed = !mzl_collapsed">
-                    <i  data-feather="chevron-up" ></i>  
+                <!-- EXPAND / COLLAPSE BUTTON -->
+                <button v-if="mzl_collapsed"
+                    class="text-2xl hover:text-secondary duration-75 flex justify-center  hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
+                    title="Collapse" type="button" @click="mzl_collapsed = !mzl_collapsed">
+                    <i data-feather="chevron-up"></i>
                 </button>
-                <button v-else class="text-2xl hover:text-secondary duration-75 flex justify-center  hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg " title="Expand"
-                    type="button" @click="mzl_collapsed = !mzl_collapsed">
-                    <i  data-feather="chevron-down" ></i>  
+                <button v-else
+                    class="text-2xl hover:text-secondary duration-75 flex justify-center  hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
+                    title="Expand" type="button" @click="mzl_collapsed = !mzl_collapsed">
+                    <i data-feather="chevron-down"></i>
                 </button>
             </div>
 
@@ -139,7 +154,7 @@
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
 
                         <option v-for="item in persCatgArr" :selected="item === configFile.personality_category">{{ item }}
-                        
+
                         </option>
 
                     </select>
@@ -161,10 +176,10 @@
             class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
             <div class="flex flex-row ">
                 <button @click.stop="pzc_collapsed = !pzc_collapsed"
-                        class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
+                    class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
                     <i :data-feather="mc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
                     <h3 class="text-lg font-semibold cursor-pointer select-none">
-                    Personalities zoo
+                        Personalities zoo
                     </h3>
                 </button>
             </div>
@@ -184,7 +199,7 @@
             class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
             <div class="flex flex-row">
                 <button @click.stop="mc_collapsed = !mc_collapsed"
-                class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
+                    class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
                     <i :data-feather="mc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
                     <h3 class="text-lg font-semibold cursor-pointer select-none">
                         Model Configuration</h3>
@@ -332,8 +347,7 @@
 
     <YesNoDialog ref="yesNoDialog" />
     <MessageBox ref="messageBox" />
-    <Toast  ref="toast" />
-
+    <Toast ref="toast" />
 </template>
 
 <script>
@@ -368,17 +382,17 @@ export default {
         return {
             // Models zoo installer stuff
             models: [],
-            personalities:[],
+            personalities: [],
             // Accordeon stuff 
-            collapsedArr:[],
-            all_collapsed:true,    
+            collapsedArr: [],
+            all_collapsed: true,
             bec_collapsed: true,
             mzc_collapsed: true, // models zoo
             pzc_collapsed: true, // personalities zoo
             pc_collapsed: true,
             mc_collapsed: true,
             // Zoo accordeoon
-            mzl_collapsed:false,
+            mzl_collapsed: false,
             // Settings stuff
             backendsArr: [],
             modelsArr: [],
@@ -394,14 +408,14 @@ export default {
         }
     },
     created() {
-        this.fetchModels();
+
     }, methods: {
-        collapseAll(val){
-            this.bec_collapsed=val
-            this.mzc_collapsed=val
-            this.pzc_collapsed=val
-            this.pc_collapsed=val
-            this.mc_collapsed=val
+        collapseAll(val) {
+            this.bec_collapsed = val
+            this.mzc_collapsed = val
+            this.pzc_collapsed = val
+            this.pc_collapsed = val
+            this.mc_collapsed = val
         },
         fetchModels() {
             console.log("Fetching models")
@@ -414,12 +428,18 @@ export default {
                     console.log(error);
                 });
         },
-        onSelected(model_object){
+        onSelected(model_object) {
             console.log("Selected model")
             // eslint-disable-next-line no-unused-vars
-            this.update_setting('model', model_object.title, (res)=>{console.log("Model selected"); })
+            if (model_object) {
+                this.update_model(model_object.title)
+                this.configFile.model = model_object.title
+            }
+
+            //this.update_setting('model', model_object.title, (res)=>{console.log("Model selected"); })
         },
         // Model installation
+
         onInstall(model_object) {
             let path = model_object.path;
             this.showProgress = true;
@@ -474,7 +494,7 @@ export default {
                     console.error('Installation failed:', message.error);
                 }
             };
-            socket.on('install_progress', progressListener);            
+            socket.on('install_progress', progressListener);
             socket.emit('uninstall_model', { path: model_object.path });
         },
         // messagebox ok stuff
@@ -483,7 +503,7 @@ export default {
         },
         // Refresh stuff
         refresh() {
-            
+
             console.log("Refreshing")
             // No need to refresh all lists because they never change during using application. 
             // On settings change only config file chnages.
@@ -494,20 +514,20 @@ export default {
             this.api_get_req("list_personalities_categories").then(response => { this.persCatgArr = response })
             this.api_get_req("list_personalities").then(response => { this.persArr = response })
             //this.api_get_req("list_languages").then(response => { this.langArr = response })
-            this.api_get_req("get_config").then(response => { 
-                this.configFile = response 
+            this.api_get_req("get_config").then(response => {
+                this.configFile = response
                 console.log("selecting model")
                 this.models.forEach(model => {
                     console.log(`${model} -> ${response["model"]}`)
-                    if(model.title==response["model"]){
-                        model.selected=true;
+                    if (model.title == response["model"]) {
+                        model.selected = true;
                     }
-                    else{
-                        model.selected=false;
+                    else {
+                        model.selected = false;
                     }
-                }); 
+                });
             })
-            this.fetchModels(); 
+            this.fetchModels();
         },
         // Accordeon stuff
         toggleAccordion() {
@@ -530,32 +550,32 @@ export default {
                     return res.data;
                 }
             })
-            // eslint-disable-next-line no-unused-vars
-            .catch(error => { return { 'status': false } });
+                // eslint-disable-next-line no-unused-vars
+                .catch(error => { return { 'status': false } });
         },
         update_backend(value) {
             console.log("Upgrading backend")
             // eslint-disable-next-line no-unused-vars
-            this.update_setting('backend', value, (res)=>{
+            this.update_setting('backend', value, (res) => {
                 this.refresh();
-                console.log("Backend changed"); 
+                console.log("Backend changed");
                 console.log(res);
-                this.$refs.toast.showToast("Backend changed.",4, true)
+                this.$refs.toast.showToast("Backend changed.", 4, true)
             })
         },
         update_model(value) {
             console.log("Upgrading model")
             // eslint-disable-next-line no-unused-vars
-            this.update_setting('model', value, (res)=>{console.log("Model changed"); this.fetchModels(); })
+            this.update_setting('model', value, (res) => { console.log("Model changed"); this.fetchModels(); })
         },
         applyConfiguration() {
             this.isLoading = true;
             axios.post('/apply_settings').then((res) => {
                 this.isLoading = false;
                 console.log(res.data)
-                if(res.data.status==="succeeded"){
+                if (res.data.status === "succeeded") {
                     console.log("applying configuration succeeded")
-                    this.$refs.toast.showToast("Configuration changed successfully.",4, true)
+                    this.$refs.toast.showToast("Configuration changed successfully.", 4, true)
                 }
             })
         },
@@ -631,9 +651,9 @@ export default {
 
         })
         this.configFile = await this.api_get_req("get_config")
-
+        this.fetchModels();
         this.backendsArr = await this.api_get_req("list_backends")
-        this.modelsArr =  await this.api_get_req("list_models")
+        this.modelsArr = await this.api_get_req("list_models")
         this.persLangArr = await this.api_get_req("list_personalities_languages")
         this.persCatgArr = await this.api_get_req("list_personalities_categories")
         this.persArr = await this.api_get_req("list_personalities")
@@ -666,7 +686,7 @@ export default {
             })
         },
         mzl_collapsed() {
-            
+
             nextTick(() => {
                 feather.replace()
 
@@ -687,24 +707,26 @@ export default {
 
 <style>
 .loader {
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #3498db;
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  animation: spin 2s linear infinite;
-  margin-left: 8px;
-  display: inline-block;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    animation: spin 2s linear infinite;
+    margin-left: 8px;
+    display: inline-block;
 }
+
 .height-64 {
     min-height: 64px;
 }
+
 @keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
\ No newline at end of file
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}</style>
\ No newline at end of file