diff --git a/src/components/04_product-service/ฺBasicInfoProduct.vue b/src/components/04_product-service/ฺBasicInfoProduct.vue
index 05ef517e..8a1eb36c 100644
--- a/src/components/04_product-service/ฺBasicInfoProduct.vue
+++ b/src/components/04_product-service/ฺBasicInfoProduct.vue
@@ -19,11 +19,12 @@ defineProps<{
     <div class="col-4 app-text-muted">
       • {{ $t(`formDialogTitleInformation`) }}
     </div>
+
     <div class="col-8 row q-col-gutter-md">
       <q-input
         for="input-code"
-        :dense="dense"
         :outlined="!readonly"
+        :dense="dense"
         :readonly="readonly"
         :borderless="readonly"
         hide-bottom-space
@@ -55,20 +56,54 @@ defineProps<{
         class="col-12"
         :label="$t('serviceDetail')"
         v-model="detail"
+        autogrow
       />
 
       <div class="col-12" v-if="readonly">
-        <div style="padding-top: 12px">
-          <text style="padding-left: 12px; color: rgba(0, 0, 0, 0.6)">
+        <q-field
+          class="rounded"
+          :class="{ 'surface-2': remark !== undefined }"
+          :label="$t('detail')"
+          stack-label
+          dense
+          readonly
+          borderless
+        >
+          <template #label>
             {{ $t('detail') }}
-          </text>
+          </template>
 
-          <q-card-section v-html="remark" />
-        </div>
+          <template #control>
+            <div class="full-width q-pa-xs rounded">
+              <q-card-section
+                v-if="!!remark"
+                class="rounded"
+                v-html="remark"
+                style="color: black; padding: 5px 0px 0px 0px"
+              />
+            </div>
+          </template>
+        </q-field>
       </div>
 
       <div class="col-12" v-else>
-        <div class="bordered rounded" style="padding-top: 12px">
+        <q-field
+          class="full-width q-pb-md"
+          :label="$t('detail')"
+          stack-label
+          outlined
+          dense
+        >
+          <q-editor
+            dense
+            class="rounded full-width"
+            v-model="remark"
+            min-height="5rem"
+            style="border: none; cursor: auto; color: black; height: 80%"
+          />
+        </q-field>
+
+        <!-- <div class="bordered rounded" style="padding-top: 12px">
           <text style="padding-left: 12px; color: rgba(0, 0, 0, 0.6)">
             {{ $t('detail') }}
           </text>
@@ -80,7 +115,7 @@ defineProps<{
             min-height="5rem"
             style="border: none"
           />
-        </div>
+        </div> -->
       </div>
 
       <q-input