diff --git a/src/components/04_product-service/ฺBasicInfoProduct.vue b/src/components/04_product-service/ฺBasicInfoProduct.vue
index be3197bd..05ef517e 100644
--- a/src/components/04_product-service/ฺBasicInfoProduct.vue
+++ b/src/components/04_product-service/ฺBasicInfoProduct.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const remark = defineModel<string>('remark');
+const remark = defineModel<string>('remark', { default: '' });
 const detail = defineModel<string>('detail');
 const process = defineModel<number>('process');
 const name = defineModel<string>('name');
@@ -57,18 +57,31 @@ defineProps<{
         v-model="detail"
       />
 
-      <q-input
-        for="input-remark"
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        type="textarea"
-        class="col-12"
-        :label="$t('detail')"
-        v-model="remark"
-      />
+      <div class="col-12" v-if="readonly">
+        <div style="padding-top: 12px">
+          <text style="padding-left: 12px; color: rgba(0, 0, 0, 0.6)">
+            {{ $t('detail') }}
+          </text>
+
+          <q-card-section v-html="remark" />
+        </div>
+      </div>
+
+      <div class="col-12" v-else>
+        <div class="bordered rounded" style="padding-top: 12px">
+          <text style="padding-left: 12px; color: rgba(0, 0, 0, 0.6)">
+            {{ $t('detail') }}
+          </text>
+
+          <q-editor
+            dense
+            class="rounded surface-2"
+            v-model="remark"
+            min-height="5rem"
+            style="border: none"
+          />
+        </div>
+      </div>
 
       <q-input
         for="input-process"
@@ -91,4 +104,8 @@ defineProps<{
   />
 </template>
 
-<style scoped></style>
+<style scoped>
+.q-editor__toolbar {
+  border-bottom: none !important;
+}
+</style>