diff --git a/app/repos/productDescriptionRepo/productDescriptionRepo.go b/app/repos/productDescriptionRepo/productDescriptionRepo.go
index 1b0faf8..4e42175 100644
--- a/app/repos/productDescriptionRepo/productDescriptionRepo.go
+++ b/app/repos/productDescriptionRepo/productDescriptionRepo.go
@@ -52,10 +52,10 @@ func (r *ProductDescriptionRepo) GetProductDescription(productID uint, productid
 
 // If it doesn't exist, returns an error.
 func (r *ProductDescriptionRepo) CreateIfDoesNotExist(productID uint, productid_lang uint) error {
-	record := model.ProductDescription{
-		ProductID: productID,
-		ShopID:    constdata.SHOP_ID,
-		LangID:    productid_lang,
+	record := dbmodel.PsProductLang{
+		IDProduct: int32(productID),
+		IDShop:    int32(constdata.SHOP_ID),
+		IDLang:    int32(productid_lang),
 	}
 
 	err := db.Get().
diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index f1dcb22..9ce994b 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -45,7 +45,7 @@
               }" color="primary" class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
                 Cancel
               </UButton>
-              <UButton color="primary" @click="saveDescription"
+              <UButton color="primary" @click="productStore.saveProductDescription(productID, toLangId)"
                 class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
                 Save
               </UButton>
diff --git a/bo/src/components/inner/CountryCurrencySwitch.vue b/bo/src/components/inner/CountryCurrencySwitch.vue
index cb15e33..f51746c 100644
--- a/bo/src/components/inner/CountryCurrencySwitch.vue
+++ b/bo/src/components/inner/CountryCurrencySwitch.vue
@@ -1,34 +1,34 @@
 <template>
-  <div class="flex flex-col">
-    <p class="text-sm">Country/Currency:</p>
-    <USelectMenu v-model="country" :items="countries"
-      class="w-44 bg-(--main-light) dark:bg-(--black) rounded-md hover:none! text-sm!" valueKey="id"
-      :searchInput="false">
-      <template #default="{ modelValue }">
-        <div class="flex items-center gap-1">
-          <span class="font-medium dark:text-white text-black whitespace-nowrap">{{ modelValue.name }} / {{
-            currentCountry?.ps_currency.iso_code }}</span>
-        </div>
-      </template>
-      <template #item-leading="{ item }">
-        <div class="flex items-center rounded-md cursor-pointer transition-colors">
-          <span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
-        </div>
-      </template>
-    </USelectMenu>
-  </div>
+  <USelectMenu v-model="country" :items="countries" value-key="id"
+    class="w-48 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm" :searchInput="false">
+    <template #default>
+      <div class="flex flex-col items-start leading-tight">
+        <span class="text-xs text-gray-400">
+          Country/Currency
+        </span>
+        <span class="font-medium dark:text-white text-black">
+          {{ country?.name }} / {{ country?.ps_currency.iso_code }}
+        </span>
+      </div>
+    </template>
+
+    <template #item-leading="{ item }">
+      <div class="flex items-center gap-2 cursor-pointer">
+        <span class="text-lg">{{ item.flag }}</span>
+        <span class="font-medium dark:text-white text-black">
+          {{ item.name }}
+        </span>
+      </div>
+    </template>
+  </USelectMenu>
 </template>
 
 <script setup lang="ts">
 import { countries, currentCountry, switchLocalization } from '@/router/langs'
-import { useRouter, useRoute } from 'vue-router'
 import { useCookie } from '@/composable/useCookie'
 import { computed, watch } from 'vue'
-const router = useRouter()
-const route = useRoute()
 
 const cookie = useCookie()
-
 const country = computed({
   get() {
     return currentCountry.value
diff --git a/bo/src/components/inner/LangSwitch.vue b/bo/src/components/inner/LangSwitch.vue
index b6826b7..ad17b56 100644
--- a/bo/src/components/inner/LangSwitch.vue
+++ b/bo/src/components/inner/LangSwitch.vue
@@ -1,24 +1,30 @@
 <template>
-  <div class="flex flex-col">
-    <p class="text-sm">Language:</p>
-    <USelectMenu v-model="locale" :items="langs"
-      class="w-40 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm  hover:none!" valueKey="iso_code"
-      :searchInput="false">
-      <template #default="{ modelValue }">
-        <div class="flex items-center gap-1">
-          <!-- <span class="text-md dark:text-white text-black">{{langs.find(x => x.iso_code == modelValue)?.flag}}</span> -->
-          <span class="font-medium dark:text-white text-black">{{langs.find(x => x.iso_code ==
-            modelValue)?.name}}</span>
+  <USelectMenu v-model="locale" :items="langs" value-key="iso_code"
+    class="w-48 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm" :searchInput="false">
+    <template #default>
+      <div class="flex items-center gap-2">
+        <!-- <span class="text-lg">{{ selectedLang?.flag }}</span> -->
+
+        <div class="flex flex-col leading-tight items-start">
+          <span class="text-xs text-gray-400">
+            Language
+          </span>
+          <span class="font-medium dark:text-white text-black">
+            {{ selectedLang?.name || 'Select language' }}
+          </span>
         </div>
-      </template>
-      <template #item-leading="{ item }">
-        <div class="flex items-center rounded-md cursor-pointer transition-colors">
-          <!-- <span class="text-md ">{{ item.flag }}</span> -->
-          <span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
-        </div>
-      </template>
-    </USelectMenu>
-  </div>
+      </div>
+    </template>
+
+    <template #item-leading="{ item }">
+      <div class="flex items-center gap-2">
+        <span class="text-lg">{{ item.flag }}</span>
+        <span class="font-medium dark:text-white text-black">
+          {{ item.name }}
+        </span>
+      </div>
+    </template>
+  </USelectMenu>
 </template>
 
 <script setup lang="ts">
@@ -31,6 +37,10 @@ import { i18n } from '@/plugins/02_i18n'
 const router = useRouter()
 const route = useRoute()
 
+const selectedLang = computed(() =>
+  langs.find(item => item.iso_code === locale.value)
+)
+
 const cookie = useCookie()
 const locale = computed({
   get() {
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index 89aa897..ce0760d 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -1,19 +1,61 @@
-<!-- <script setup lang="ts">
-import TopBar from '@/components/TopBar.vue';
-</script>
-
 <template>
-  <div class="h-screen grid grid-rows-[auto_1fr_auto]">
-    <main class="pt-20 pb-10">
-      <TopBar />
-      <div class=" px-4">
+  <div class="flex flex-1">
+    <USidebar v-model:open="open" collapsible="icon" rail :ui="{
+      container: 'h-full',
+      inner: 'bg-elevated/25 divide-transparent',
+      body: 'py-0'
+    }">
+      <template #header>
+        <UDropdownMenu :items="teamsItems" :content="{ align: 'start', collisionPadding: 12 }"
+          :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }">
+          <UButton v-bind="selectedTeam" trailing-icon="i-lucide-chevrons-up-down" color="neutral" variant="ghost"
+            square class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
+              trailingIcon: 'text-dimmed ms-auto'
+            }" />
+        </UDropdownMenu>
+      </template>
+
+      <template #default="{ state }">
+        <UNavigationMenu :key="state" :items="menuItems" orientation="vertical"
+          :ui="{ link: 'p-1.5 overflow-hidden' }" />
+      </template>
+
+      <template #footer>
+        <UDropdownMenu :items="userItems" :content="{ align: 'center', collisionPadding: 12 }"
+          :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }">
+          <UButton v-bind="user" :label="user?.name" trailing-icon="i-lucide-chevrons-up-down" color="neutral"
+            variant="ghost" square class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
+              trailingIcon: 'text-dimmed ms-auto'
+            }" />
+        </UDropdownMenu>
+      </template>
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center justify-between px-4 border-b border-default">
+        <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
+          @click="open = !open" />
+        <div class="flex items-center gap-12">
+          <div class="flex items-center gap-2">
+            <CountryCurrencySwitch />
+            <LangSwitch />
+          </div>
+          <div class="flex items-center gap-2">
+            <ThemeSwitch />
+            <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
+              class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark) whitespace-nowrap">
+              {{ $t('general.logout') }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex-1 p-4">
         <slot />
       </div>
-    </main>
+    </div>
   </div>
-</template> -->
-
-
+</template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
@@ -23,7 +65,7 @@ import { defineShortcuts, extractShortcuts } from '@nuxt/ui/runtime/composables/
 import { LabelTrans, TopMenuItem } from '@/types'
 
 const open = ref(true)
-
+const authStore = useAuthStore()
 const colorMode = useColorMode()
 
 const teams = ref([
@@ -113,6 +155,9 @@ function getItems(state: 'collapsed' | 'expanded') {
 import { useRouter } from 'vue-router'
 import { currentLang } from '@/router/langs'
 import { useFetchJson } from '@/composable/useFetchJson'
+import { useAuthStore } from '@/stores/auth'
+import CountryCurrencySwitch from '@/components/inner/CountryCurrencySwitch.vue'
+import LangSwitch from '@/components/inner/LangSwitch.vue'
 
 
 const router = useRouter()
@@ -246,49 +291,3 @@ const userItems = computed<DropdownMenuItem[][]>(() => [
 
 defineShortcuts(extractShortcuts(teamsItems.value))
 </script>
-
-<template>
-  <div class="flex flex-1">
-    <USidebar v-model:open="open" collapsible="icon" rail :ui="{
-      container: 'h-full',
-      inner: 'bg-elevated/25 divide-transparent',
-      body: 'py-0'
-    }">
-      <template #header>
-        <UDropdownMenu :items="teamsItems" :content="{ align: 'start', collisionPadding: 12 }"
-          :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }">
-          <UButton v-bind="selectedTeam" trailing-icon="i-lucide-chevrons-up-down" color="neutral" variant="ghost"
-            square class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
-              trailingIcon: 'text-dimmed ms-auto'
-            }" />
-        </UDropdownMenu>
-      </template>
-
-      <template #default="{ state }">
-        <UNavigationMenu :key="state" :items="menuItems" orientation="vertical"
-          :ui="{ link: 'p-1.5 overflow-hidden' }" />
-      </template>
-
-      <template #footer>
-        <UDropdownMenu :items="userItems" :content="{ align: 'center', collisionPadding: 12 }"
-          :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }">
-          <UButton v-bind="user" :label="user?.name" trailing-icon="i-lucide-chevrons-up-down" color="neutral"
-            variant="ghost" square class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
-              trailingIcon: 'text-dimmed ms-auto'
-            }" />
-        </UDropdownMenu>
-      </template>
-    </USidebar>
-
-    <div class="flex-1 flex flex-col">
-      <div class="h-(--ui-header-height) shrink-0 flex items-center px-4 border-b border-default">
-        <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
-          @click="open = !open" />
-      </div>
-
-      <div class="flex-1 p-4">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/bo/src/stores/product.ts b/bo/src/stores/product.ts
index f1d6828..ebd028a 100644
--- a/bo/src/stores/product.ts
+++ b/bo/src/stores/product.ts
@@ -45,6 +45,7 @@ export const useProductStore = defineStore('product', () => {
     }
   }
 
+  const translat = ref()
   const settingStore = useSettingsStore()
   async function translateProductDescription(productID: number, toLangId: number, model: string = 'Google') {
     loading.value = true
@@ -53,6 +54,7 @@ export const useProductStore = defineStore('product', () => {
     try {
       const response = await useFetchJson<ProductDescription>(`/api/v1/restricted/product-translation/translate-product-description?productID=${productID}&productFromLangID=${settingStore.shopDefaultLanguage}&productToLangID=${toLangId}&model=${model}`)
       productDescription.value = response.items
+      saveProductDescription(productID, toLangId)
       return response.items
     } catch (e: any) {
       error.value = e?.message || 'Failed to translate product description'
@@ -62,16 +64,46 @@ export const useProductStore = defineStore('product', () => {
     }
   }
 
+  function fixHtml(html: string) {
+    return html
+      // 1. fix img
+      .replace(/<img([^>]*?)>/g, '<img$1 />')
 
-  function stripHtml(html: string) {
-    const div = document.createElement('div')
-    div.innerHTML = html
-    return div.textContent || div.innerText || ''
+      // 2. escape text only
+      .replace(/>([^<]+)</g, (match, text) => {
+        const escaped = text
+          .replace(/&/g, '&amp;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;')
+
+        return `>${escaped}<`
+      })
   }
 
-  async function saveProductDescription(productID?: number, langId?: number) {
+  function fixAll(obj: any): any {
+    if (typeof obj === 'string') {
+      return fixHtml(obj)
+    }
+
+    if (Array.isArray(obj)) {
+      return obj.map(fixAll)
+    }
+
+    if (typeof obj === 'object' && obj !== null) {
+      const result: any = {}
+      for (const [key, value] of Object.entries(obj)) {
+        result[key] = fixAll(value)
+      }
+      return result
+    }
+
+    return obj
+  }
+
+  async function saveProductDescription(productID?: number, langId?: number | null) {
     const id = productID || 1
     const lang = langId || 1
+
     try {
       const data = await useFetchJson(
         `/api/v1/restricted/product-translation/save-product-description?productID=${id}&productLangID=${lang}`,
@@ -81,14 +113,14 @@ export const useProductStore = defineStore('product', () => {
             'Content-Type': 'application/json'
           },
           body: JSON.stringify({
-            name: stripHtml(productDescription.value?.name || ''),
-            description: stripHtml(productDescription.value?.description || ''),
-            description_short: stripHtml(productDescription.value?.description_short || ''),
-            meta_title: stripHtml(productDescription.value?.meta_title || ''),
-            meta_description: stripHtml(productDescription.value?.meta_description || ''),
-            available_now: stripHtml(productDescription.value?.available_now || ''),
-            available_later: stripHtml(productDescription.value?.available_later || ''),
-            usage: stripHtml(productDescription.value?.usage || ''),
+            name: productDescription.value?.name || '',
+            description: productDescription.value?.description || '',
+            description_short: productDescription.value?.description_short || '',
+            meta_title: productDescription.value?.meta_title || '',
+            meta_description: productDescription.value?.meta_description || '',
+            available_now: productDescription.value?.available_now || '',
+            available_later: productDescription.value?.available_later || '',
+            usage: productDescription.value?.usage || '',
           })
         }
       )
@@ -102,6 +134,7 @@ export const useProductStore = defineStore('product', () => {
     productDescription,
     loading,
     error,
+    translat,
     translateProductDescription,
     getProductDescription,
     saveProductDescription