diff --git a/bo/src/app.config.ts b/bo/src/app.config.ts
index 7e88496..f19f0d8 100644
--- a/bo/src/app.config.ts
+++ b/bo/src/app.config.ts
@@ -8,6 +8,7 @@ export const uiOptions: NuxtUIOptions = {
             }
         },
         button: {
+            base: 'light:hover:bg-none!'
         },
         input: {
             slots: {
diff --git a/bo/src/assets/main.css b/bo/src/assets/main.css
index c657abf..10fcfc0 100644
--- a/bo/src/assets/main.css
+++ b/bo/src/assets/main.css
@@ -16,7 +16,6 @@ body {
 @theme {
   --main-light: #FFFEFB;
   --second-light: #F8FAFC;
-
   --main-dark: #1A1A1A;
   --black: #1A1A1A;
 
@@ -42,6 +41,7 @@ body {
   --ui-border-accented: var(--border-light);
   --ui-border: var(--border-light);
   --ui-color-neutral-700: var(--black);
+  --ui-primary: var(--accent-blue-light)
 }
 
 .dark {
@@ -56,6 +56,7 @@ body {
   --border: var(--border-dark);
   --tw-border-style: var(--border-dark);
   --ui-text-inverted: #fff;
+  --ui-primary: var(--accent-blue-dark)
 }
 
 .label-form {
diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index 0ccfe5b..503a3b9 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -7,9 +7,9 @@
     </div>
     <div class="container mx-auto ">
       <div
-        class=" gap-4 mb-6 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
+        class=" gap-4 mb-6 border-b border-(--border-light) dark:border-(--border-dark) pb-6 rounded-md">
         <div v-if="!isShowProductView" class="flex items-center justify-between">
-          <div class="flex flex-col items-center gap-3" v-if="!isTranslations">
+          <div class="flex items-center gap-3" v-if="!isTranslations">
             <p class="text-md whitespace-nowrap">
               Translate from Polish to :</p>
             <USelectMenu v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
@@ -45,18 +45,18 @@
               <p class="dark:text-white"> Show product</p>
             </UButton>
             <UButton @click="translateToSelectedLanguage" color="primary" :loading="translating" v-if="!isTranslations"
-              class="text-sky-600 bg-sky-100 dark:bg-(--accent-blue-dark) flex items-center! justify-center!">
+              class="text-(--text-sky-light) dark:text-(--text-sky-dark) bg-sky-100 dark:bg-(--accent-blue-dark) flex items-center! justify-center!">
               Translate
             </UButton>
             <div v-else class="flex gap-3">
               <UButton @click="() => {
                 toLangId = settingStore.shopDefaultLanguage
                 isTranslations = false
-              }" color="primary" class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark)">
+              }" color="primary" class="text-(--text-sky-light) dark:text-(--text-sky-dark) bg-(--accent-blue-light) dark:bg-(--accent-blue-dark)">
                 Cancel
               </UButton>
               <UButton color="primary" @click="productStore.saveProductDescription(productID, toLangId)"
-                class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark)">
+                class="text-(--text-sky-light) dark:text-(--text-sky-dark) bg-(--accent-blue-light) dark:bg-(--accent-blue-dark)">
                 Save
               </UButton>
             </div>
@@ -64,7 +64,7 @@
         </div>
         <div v-else>
           <UButton @click="isShowProductView = false" color="primary"
-            class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) gap-2">
+            class="text-(--text-sky-light) dark:text-(--text-sky-dark) bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) gap-2">
             <UIcon name="line-md:arrow-left" class="" />
             Back
           </UButton>
@@ -121,8 +121,8 @@
               <div class="flex items-center justify-end gap-3 mb-4">
                 <UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
                   class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
-                  <p class="text-white">Change Text</p>
-                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
+                  <p class="text-(--text-sky-light) dark:text-(--text-sky-dark)">Change Text</p>
+                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                 </UButton>
 
                 <UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral"
@@ -146,8 +146,8 @@
               <div class="flex justify-end items-center gap-3 mb-4">
                 <UButton v-if="!isEditing" @click="enableEdit"
                   class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
-                  <p class="text-white">Change Text</p>
-                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
+                  <p class="text-(--text-sky-light) dark:text-(--text-sky-dark)">Change Text</p>
+                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                 </UButton>
 
                 <UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline"