diff --git a/quasar.config.js b/quasar.config.js
index 005a922d7..6e8a8f21c 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -9,7 +9,7 @@
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
 const { configure } = require('quasar/wrappers');
-const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/vite')
+const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/vite');
 const path = require('path');
 
 module.exports = configure(function (/* ctx */) {
@@ -140,6 +140,8 @@ module.exports = configure(function (/* ctx */) {
 
             // Quasar plugins
             plugins: ['Notify', 'Dialog'],
+            //all: 'auto',
+            //autoImportComponentCase: 'pascal',
         },
 
         // animations: 'all', // --- includes all animations
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index cf63119b8..7571c6391 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -67,6 +67,7 @@ async function search() {
             dense
             standout
             autofocus
+            hide-bottom-space
         >
             <template #prepend>
                 <q-icon name="search" />
@@ -87,6 +88,24 @@ async function search() {
     </q-form>
 </template>
 
+<style lang="scss">
+@media screen and (max-width: $breakpoint-xs-max) {
+    .q-field {
+        width: 250px;
+    }
+}
+
+@media screen and (min-width: $breakpoint-xs-max) {
+    .q-field {
+        width: 400px;
+    }
+}
+
+.q-field {
+    transition: width 0.36s;
+}
+</style>
+
 <style lang="scss">
 .cursor-info {
     cursor: help;
diff --git a/src/pages/Claim/Card/ClaimLog.vue b/src/pages/Claim/Card/ClaimLog.vue
index d9fe3eb60..175d9bd6c 100644
--- a/src/pages/Claim/Card/ClaimLog.vue
+++ b/src/pages/Claim/Card/ClaimLog.vue
@@ -3,7 +3,6 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useSession } from 'src/composables/useSession';
 import { useStateStore } from 'stores/useStateStore';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import Paginate from 'src/components/PaginateData.vue';
 import ClaimLogFilter from './ClaimLogFilter.vue';
 
@@ -114,7 +113,7 @@ function actionColor(action) {
             </Paginate>
         </q-timeline>
     </div>
-    <TeleportSlot to="#actions-append">
+    <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
         <div class="row q-gutter-x-sm">
             <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
                 <q-tooltip bottom anchor="bottom right">
@@ -122,7 +121,7 @@ function actionColor(action) {
                 </q-tooltip>
             </q-btn>
         </div>
-    </TeleportSlot>
+    </Teleport>
     <q-drawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
         <q-scroll-area class="fit text-grey-8">
             <ClaimLogFilter data-key="ClaimLogs" />
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index ca5f4adaa..91a644c71 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency } from 'src/filters';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const $props = defineProps({
     id: {
@@ -30,7 +31,10 @@ const entityId = computed(() => {
                         {{ t('customer.card.salesPerson') }}
                     </q-item-label>
                     <q-item-label class="col q-ma-none">
-                        {{ entity.salesPersonUser.name }}
+                        <span class="link">
+                            {{ entity.salesPersonUser.name }}
+                            <WorkerDescriptorProxy :id="entity.salesPersonFk" />
+                        </span>
                     </q-item-label>
                 </q-item>
                 <q-item class="row">
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index b763469bc..e138be22e 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -61,7 +61,7 @@ function getWorkerAvatar() {
         @on-fetch="(data) => (worker = data)"
     >
         <template #before>
-            <q-img :src="getWorkerAvatar()">
+            <q-img :src="getWorkerAvatar()" class="photo">
                 <template #error>
                     <div
                         class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center"
@@ -130,3 +130,9 @@ function getWorkerAvatar() {
         </template>
     </card-descriptor>
 </template>
+
+<style lang="scss" scoped>
+.photo {
+    height: 256px;
+}
+</style>
diff --git a/src/pages/Worker/Card/WorkerDescriptorDialog.vue b/src/pages/Worker/Card/WorkerDescriptorDialog.vue
deleted file mode 100644
index 9c55c474f..000000000
--- a/src/pages/Worker/Card/WorkerDescriptorDialog.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import workerDescriptor from './WorkerDescriptor.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <q-dialog ref="dialogRef" @hide="onDialogHide">
-        <worker-descriptor v-if="$props.id" :id="$props.id" />
-    </q-dialog>
-</template>
diff --git a/src/pages/Worker/Card/WorkerPopover.vue b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
similarity index 65%
rename from src/pages/Worker/Card/WorkerPopover.vue
rename to src/pages/Worker/Card/WorkerDescriptorProxy.vue
index 5aad1377c..be03485f7 100644
--- a/src/pages/Worker/Card/WorkerPopover.vue
+++ b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
@@ -8,8 +8,9 @@ const $props = defineProps({
     },
 });
 </script>
+
 <template>
-    <q-card>
-        <worker-descriptor v-if="$props.id" :id="$props.id" />
-    </q-card>
+    <q-popup-proxy>
+        <WorkerDescriptor v-if="$props.id" :id="$props.id" />
+    </q-popup-proxy>
 </template>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 58d34165d..39054e6bc 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -1,20 +1,16 @@
 <script setup>
+import axios from 'axios';
 import { ref, onMounted, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
-import axios from 'axios';
-import workerDescriptorDialog from './WorkerDescriptorDialog.vue';
+import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue';
 
 onMounted(() => fetch());
-
 onUpdated(() => fetch());
 
 const route = useRoute();
 const { t } = useI18n();
-const quasar = useQuasar();
-
-t == t;
 
 const $props = defineProps({
     id: {
@@ -75,21 +71,12 @@ function sipExtension() {
     if (worker.value.sip) return worker.value.sip.extension;
     return '-';
 }
-
-function openDescriptorDialog(id) {
-    quasar.dialog({
-        component: workerDescriptorDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
     <div class="summary container">
         <q-card>
-            <skeleton-summary v-if="!worker" />
+            <SkeletonSummary v-if="!worker" />
             <template v-if="worker">
                 <div class="header bg-primary q-pa-sm q-mb-md">
                     {{ worker.id }} - {{ worker.firstName }} {{ worker.lastName }}
@@ -108,49 +95,81 @@ function openDescriptorDialog(id) {
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.card.name') }} </q-item-label>
-                                    <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.card.name') }}
+                                    </q-item-label>
+                                    <q-item-label>
+                                        {{ worker.user.nickname }}
+                                    </q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.list.department') }} </q-item-label>
-                                    <q-item-label>{{ worker.department.department.name }}</q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.list.department') }}
+                                    </q-item-label>
+                                    <q-item-label>{{
+                                        worker.department.department.name
+                                    }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.list.email') }} </q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.list.email') }}
+                                    </q-item-label>
                                     <q-item-label>{{ worker.user.email }}</q-item-label>
                                 </q-item-section>
                             </q-item>
-                            <q-item class="items-start cursor-pointer q-hoverable" v-if="worker.boss">
-                                <q-item-section @click="openDescriptorDialog(worker.bossFk)">
-                                    <q-item-label caption>{{ t('worker.summary.boss') }} </q-item-label>
+                            <q-item
+                                class="items-start cursor-pointer q-hoverable"
+                                v-if="worker.boss"
+                            >
+                                <q-item-section>
+                                    <q-item-label caption>
+                                        {{ t('worker.summary.boss') }}
+                                    </q-item-label>
                                     <q-item-label>
-                                        {{ worker.boss.name }}
+                                        <span class="link">
+                                            {{ worker.boss.name }}
+                                            <WorkerDescriptorProxy :id="worker.bossFk" />
+                                        </span>
                                     </q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.summary.phoneExtension') }} </q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.summary.phoneExtension') }}
+                                    </q-item-label>
                                     <q-item-label>
-                                        {{ worker.mobileExtension == '' ? worker.mobileExtension : '-' }}
+                                        {{
+                                            worker.mobileExtension == ''
+                                                ? worker.mobileExtension
+                                                : '-'
+                                        }}
                                     </q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.summary.entPhone') }} </q-item-label>
-                                    <q-item-label>{{ worker.phone == '' ? worker.phone : '-' }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('worker.summary.personalPhone') }} </q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.summary.entPhone') }}
+                                    </q-item-label>
                                     <q-item-label>{{
-                                        worker.client.phone == '' ? worker.client.phone : '-'
+                                        worker.phone == '' ? worker.phone : '-'
+                                    }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item>
+                                <q-item-section>
+                                    <q-item-label caption
+                                        >{{ t('worker.summary.personalPhone') }}
+                                    </q-item-label>
+                                    <q-item-label>{{
+                                        worker.client.phone == ''
+                                            ? worker.client.phone
+                                            : '-'
                                     }}</q-item-label>
                                 </q-item-section>
                             </q-item>
@@ -163,25 +182,37 @@ function openDescriptorDialog(id) {
                             </q-item-label>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption> {{ t('worker.summary.userId') }} </q-item-label>
+                                    <q-item-label caption>
+                                        {{ t('worker.summary.userId') }}
+                                    </q-item-label>
                                     <q-item-label>{{ worker.user.id }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.card.name') }} </q-item-label>
-                                    <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.card.name') }}
+                                    </q-item-label>
+                                    <q-item-label>{{
+                                        worker.user.nickname
+                                    }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.summary.role') }} </q-item-label>
-                                    <q-item-label>{{ worker.user.role.name }}</q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.summary.role') }}
+                                    </q-item-label>
+                                    <q-item-label>{{
+                                        worker.user.role.name
+                                    }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                             <q-item>
                                 <q-item-section>
-                                    <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
+                                    <q-item-label caption
+                                        >{{ t('worker.summary.sipExtension') }}
+                                    </q-item-label>
                                     <q-item-label>{{ sipExtension() }}</q-item-label>
                                 </q-item-section>
                             </q-item>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 2058405cd..8b0d9392c 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -5,7 +5,6 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import WorkerFilter from './WorkerFilter.vue';
 
@@ -129,9 +128,9 @@ function viewSummary(id) {
                                     icon="preview"
                                     @click="viewSummary(row.id)"
                                 >
-                                    <q-tooltip>{{
-                                        t('components.smartCard.openSummary')
-                                    }}</q-tooltip>
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openSummary') }}
+                                    </q-tooltip>
                                 </q-btn>
                             </q-card-actions>
                         </q-item>