diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 89043f55..ec2e9905 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -241,20 +241,22 @@ watch(
                 </span>
               </template>
             </SelectInput> -->
-            <q-btn
-              v-if="!readonly"
-              id="btn-delete-work"
-              icon="mdi-trash-can-outline"
-              dense
-              flat
-              round
-              padding="0"
-              class="q-ml-md"
-              color="negative"
-              @click.stop="$emit('deleteWork')"
-            >
-              <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
-            </q-btn>
+            <div :class="{ 'col-12 row justify-end q-mt-sm': $q.screen.lt.md }">
+              <q-btn
+                v-if="!readonly"
+                id="btn-delete-work"
+                icon="mdi-trash-can-outline"
+                dense
+                flat
+                round
+                padding="0"
+                class="q-ml-md"
+                color="negative"
+                @click.stop="$emit('deleteWork')"
+              >
+                <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
+              </q-btn>
+            </div>
           </div>
         </div>
       </template>
@@ -270,29 +272,29 @@ watch(
         <!-- product -->
         <div class="bordered-t">
           <div
-            class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
+            class="q-py-xs text-weight-medium justify-between items-center q-px-md"
+            :class="{ row: $q.screen.gt.xs }"
             style="background-color: hsla(var(--info-bg) / 0.1)"
           >
-            <span>
-              {{ $t('productService.service.productInWork') }}
-              {{ workIndex + 1 }}
+            {{ $t('productService.service.productInWork') }}
+            {{ workIndex + 1 }}
 
+            <span class="row items-center justify-between">
               <q-checkbox
                 size="xs"
-                :class="$q.screen.gt.xs ? 'q-pl-lg' : 'q-pl-sm'"
                 v-model="attributes.showTotalPrice"
                 :label="$t('productService.service.showTotalPrice')"
                 style="color: hsl(var(--text-mute-2))"
                 :disable="readonly"
               />
+              <AddButton
+                v-if="!readonly"
+                icon-only
+                id="btn-add-work-product"
+                for="btn-add-work-product"
+                @click.stop="$emit('addProduct')"
+              />
             </span>
-            <AddButton
-              v-if="!readonly"
-              icon-only
-              id="btn-add-work-product"
-              for="btn-add-work-product"
-              @click.stop="$emit('addProduct')"
-            />
           </div>
 
           <div
@@ -302,19 +304,19 @@ watch(
             <section
               v-for="(product, index) in productItems"
               :key="product.id"
-              class="full-width row items-center justify-between"
+              class="full-width items-center justify-between row"
             >
               <div
-                class="row col items-center justify-between full-width surface-1 q-px-sm q-py-xs"
+                class="row col-md col-12 items-center justify-between full-width surface-1 q-px-sm q-py-xs rounded"
                 style="min-height: 70px"
               >
                 <!-- product detail -->
                 <section
-                  class="row items-center col-md col-12 no-wrap"
+                  class="row items-center col-md col-12"
                   v-if="productItems"
                 >
                   <q-btn
-                    v-if="!readonly && $q.screen.gt.xs"
+                    v-if="!readonly"
                     id="btn-product-up"
                     icon="mdi-arrow-up"
                     dense
@@ -326,7 +328,7 @@ watch(
                     @click.stop="$emit('moveProductUp', productItems, index)"
                   />
                   <q-btn
-                    v-if="!readonly && $q.screen.gt.xs"
+                    v-if="!readonly"
                     id="btn-product-down"
                     for="btn-product-down"
                     icon="mdi-arrow-down"
@@ -347,25 +349,32 @@ watch(
                     {{ index + 1 }}
                   </q-avatar>
 
-                  <div class="col row no-wrap items-center">
+                  <div
+                    class="col-md col-12 row items-center"
+                    :class="{ 'q-pt-sm': $q.screen.lt.md }"
+                  >
                     <div
-                      v-if="$q.screen.gt.xs"
-                      class="bordered q-mx-md col-3 image-box"
+                      :class="{ 'col-12 flex justify-center': $q.screen.lt.md }"
                     >
-                      <q-img
-                        :src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
-                        style="object-fit: cover; width: 100%; height: 100%"
-                      >
-                        <template #error>
-                          <div
-                            class="surface-3 full-width full-height no-padding"
-                          >
-                            <q-img src="blank-image.png"></q-img>
-                          </div>
-                        </template>
-                      </q-img>
+                      <div class="bordered q-mx-md col-md-3 image-box">
+                        <q-img
+                          :src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
+                          style="object-fit: cover; width: 100%; height: 100%"
+                        >
+                          <template #error>
+                            <div
+                              class="surface-3 full-width full-height no-padding"
+                            >
+                              <q-img src="blank-image.png"></q-img>
+                            </div>
+                          </template>
+                        </q-img>
+                      </div>
                     </div>
-                    <article class="column col full-width justify-between">
+                    <article
+                      class="column col-md col-12 full-width justify-between"
+                      :class="{ 'q-py-sm': $q.screen.lt.md }"
+                    >
                       <span
                         class="text-weight-medium ellipsis-2-lines full-width"
                       >
@@ -391,7 +400,8 @@ watch(
                   <span class="col-12 row" style="color: var(--teal-9)">
                     <span
                       v-if="priceDisplay?.price"
-                      class="col ellipsis price-orange text-weight-bold"
+                      class="col-md col-12 ellipsis price-orange text-weight-bold"
+                      :class="{ 'row justify-between': $q.screen.lt.md }"
                     >
                       <div class="text-caption app-text-muted-2">
                         {{ $t('productService.product.salePrice') }}
@@ -407,7 +417,8 @@ watch(
                     </span>
                     <span
                       v-if="priceDisplay?.agentPrice"
-                      class="col ellipsis price-purple text-weight-bold"
+                      class="col-md col-12 ellipsis price-purple text-weight-bold"
+                      :class="{ 'row justify-between': $q.screen.lt.md }"
                     >
                       <div class="text-caption app-text-muted-2">
                         {{ $t('productService.product.agentPrice') }}
@@ -423,7 +434,8 @@ watch(
                     </span>
                     <span
                       v-if="priceDisplay?.serviceCharge"
-                      class="col ellipsis price-pink column"
+                      class="col-md col-12 ellipsis price-pink"
+                      :class="{ 'row justify-between': $q.screen.lt.md }"
                     >
                       <div class="text-caption app-text-muted-2">
                         {{ $t('productService.product.processingPrice') }}
@@ -437,14 +449,16 @@ watch(
                         ฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
                       </q-tooltip>
                     </span>
-                    <span class="col ellipsis column text-weight-medium">
+                    <span
+                      class="col-md col-12 ellipsis text-weight-medium"
+                      :class="{ 'row justify-between': $q.screen.lt.md }"
+                    >
                       <div class="text-caption app-text-muted-2">
                         {{ $t('productService.service.InstallmentsNo') }}
                       </div>
                       {{ !readonly ? '' : product.installmentNo }}
-                      <span class="row justify-end">
+                      <span v-if="!readonly" class="row justify-end">
                         <q-input
-                          v-if="!readonly && $q.screen.gt.xs"
                           outlined
                           :max="installments"
                           input-class="text-right no-padding"
@@ -462,21 +476,25 @@ watch(
                 </div>
               </div>
 
-              <q-btn
-                v-if="!readonly"
-                class="q-ml-md"
-                id="btn-delete-work-product"
-                for="btn-delete-work-product"
-                icon="mdi-trash-can-outline"
-                padding="0"
-                dense
-                flat
-                round
-                color="negative"
-                @click.stop="$emit('deleteProduct', productItems, index)"
+              <div
+                :class="{ 'col-12 row justify-end q-mt-sm': $q.screen.lt.md }"
               >
-                <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
-              </q-btn>
+                <q-btn
+                  v-if="!readonly"
+                  class="q-ml-md"
+                  id="btn-delete-work-product"
+                  for="btn-delete-work-product"
+                  icon="mdi-trash-can-outline"
+                  padding="0"
+                  dense
+                  flat
+                  round
+                  color="negative"
+                  @click.stop="$emit('deleteProduct', productItems, index)"
+                >
+                  <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
+                </q-btn>
+              </div>
             </section>
           </div>
           <div v-else class="app-text-muted q-py-md q-px-md">
@@ -594,7 +612,11 @@ watch(
                       v-if="productItems.length > 0"
                       class="surface-1 rounded q-pa-xs"
                     >
-                      <div v-for="product in productItems" :key="product.id">
+                      <div
+                        v-for="product in productItems"
+                        :key="product.id"
+                        class="ellipsis-2-lines"
+                      >
                         <q-checkbox
                           v-if="attributes.workflowStep[stepIndex].productsId"
                           :disable="readonly"