diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index 678e3857..44ced12a 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -104,6 +104,7 @@ defineEmits<{
     >
       <template #prepend>
         <q-btn
+          v-if="!readonly"
           dense
           unelevated
           round
diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
index 8e581929..6fd82722 100644
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/src/components/04_product-service/FormServiceWork.vue
@@ -1,20 +1,14 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { moveItemUp, moveItemDown, deleteItem, dialog } from 'src/stores/utils';
 
 import NoData from 'src/components/NoData.vue';
 import WorkManagementComponent from './WorkManagementComponent.vue';
 
-import useProductServiceStore from 'src/stores/product-service';
-
-const productServiceStore = useProductServiceStore();
 const { t } = useI18n();
 
-import { WorkItems, ProductList } from 'src/stores/product-service/types';
+import { WorkItems } from 'src/stores/product-service/types';
 
-const serviceName = defineModel<string>('serviceName');
-const product = defineModel<ProductList[]>();
 const workItems = defineModel<WorkItems[]>('workItems', { default: [] });
 
 defineProps<{
@@ -59,6 +53,7 @@ function confirmDelete(items: unknown[], index: number) {
     <div class="col-1 app-text-muted row items-start">
       • {{ $t(`workInformation`) }}
       <q-btn
+        v-if="!readonly"
         icon="mdi-plus"
         dense
         flat
@@ -77,6 +72,7 @@ function confirmDelete(items: unknown[], index: number) {
         :index="index"
         :length="workItems.length"
         :workIndex="index"
+        :readonly="readonly"
         v-model:work-name="workItems[index].name"
         v-model:product-items="work.product"
         @add-product="$emit('addProduct', index)"
diff --git a/src/components/04_product-service/ServiceProperties.vue b/src/components/04_product-service/ServiceProperties.vue
index 621c3a80..354c747a 100644
--- a/src/components/04_product-service/ServiceProperties.vue
+++ b/src/components/04_product-service/ServiceProperties.vue
@@ -230,7 +230,7 @@ function confirmDelete(items: unknown[], index: number) {
             {{ index + 1 }}
           </q-avatar>
 
-          <!-- type -->
+          <!-- field name -->
           <q-select
             dense
             outlined
@@ -256,6 +256,7 @@ function confirmDelete(items: unknown[], index: number) {
           </q-select>
         </div>
 
+        <!-- type -->
         <div class="col">
           <q-select
             dense
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index ef3003fb..82109cac 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -15,6 +15,7 @@ defineProps<{
   workIndex: number;
   length: number;
   index: number;
+  readonly?: boolean;
 }>();
 
 const workName = defineModel<string>('workName');
@@ -45,10 +46,13 @@ defineEmits<{
       switch-toggle-side
       default-opened
       expand-icon="mdi-chevron-down-circle"
+      header-class="surface-2 expansion-rounded"
+      header-style="border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2)"
     >
       <template v-slot:header>
         <div class="row items-center q-py-sm full-width" @click.stop>
           <q-btn
+            v-if="!readonly"
             id="btn-work-up-product"
             icon="mdi-arrow-up"
             dense
@@ -59,6 +63,7 @@ defineEmits<{
             @click.stop="$emit('moveWorkUp')"
           />
           <q-btn
+            v-if="!readonly"
             id="btn-work-down-product"
             icon="mdi-arrow-down"
             dense
@@ -70,18 +75,19 @@ defineEmits<{
             @click.stop="$emit('moveWorkDown')"
           />
           <div
-            for="input-work-name"
-            class="bordered col rounded q-py-sm q-px-md"
-            :placeholder="$t('workName')"
-            :input-style="'color: hsl(var(--text-mute-2))'"
-            style="background-color: var(--surface-1); z-index: 2"
-            @click="fetchListOfWork()"
+            for="select-work-name"
+            class="col rounded q-py-sm q-px-md"
+            :class="{ bordered: !readonly }"
+            :style="`background-color:${readonly ? 'var(--surface-2)' : 'var(--surface-1); z-index: 2'}`"
+            @click="() => (readonly ? '' : fetchListOfWork())"
           >
             <q-btn
+              v-if="!readonly"
               dense
               unelevated
               round
               padding="0"
+              class="q-mr-sm"
               style="background-color: var(--surface-tab)"
               @click.stop="$emit('workProperties')"
             >
@@ -91,14 +97,14 @@ defineEmits<{
                 style="color: var(--stone-7)"
               />
             </q-btn>
-            <span class="text-body2 q-pl-sm" style="color: var(--foreground)">
+            <span class="text-body2" style="color: var(--foreground)">
               {{ $t('workNo') }} {{ index + 1 }} :
               <span class="app-text-muted-2">
                 {{ workName ? workName : $t('workName') }}
               </span>
             </span>
 
-            <q-menu fit anchor="bottom left" self="top left">
+            <q-menu v-if="!readonly" fit anchor="bottom left" self="top left">
               <q-item>
                 <div class="full-width flex items-center justify-between">
                   {{ $t('workName') }}
@@ -144,6 +150,7 @@ defineEmits<{
             </q-menu>
           </div>
           <q-btn
+            v-if="!readonly"
             id="btn-delete-work"
             icon="mdi-trash-can-outline"
             dense
@@ -165,6 +172,7 @@ defineEmits<{
         >
           <span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
           <q-btn
+            v-if="!readonly"
             id="btn-add-work-product"
             flat
             dense
@@ -187,6 +195,7 @@ defineEmits<{
             >
               <div class="row items-center col-9 no-wrap" v-if="productItems">
                 <q-btn
+                  v-if="!readonly"
                   id="btn-product-up"
                   icon="mdi-arrow-up"
                   dense
@@ -197,6 +206,7 @@ defineEmits<{
                   @click.stop="$emit('moveProductUp', productItems, index)"
                 />
                 <q-btn
+                  v-if="!readonly"
                   id="btn-product-down"
                   icon="mdi-arrow-down"
                   dense
@@ -249,7 +259,7 @@ defineEmits<{
                 </div>
               </div>
 
-              <div class="row justify-end text-right col-3">
+              <div class="row justify-end text-right col-3 q-pr-sm">
                 <span
                   class="col-12 text-weight-bold text-h6"
                   style="color: var(--teal-9)"
@@ -266,6 +276,7 @@ defineEmits<{
             </div>
 
             <q-btn
+              v-if="!readonly"
               id="btn-delete-work-product"
               icon="mdi-trash-can-outline"
               dense
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 843c8311..a7dc8f87 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1828,6 +1828,7 @@ watch(currentStatus, async () => {
   <FormDialog
     no-address
     :edit="!(formDataProductService.status === 'INACTIVE')"
+    height="95vh"
     :isEdit="infoServiceEdit"
     :title="$t('service', { msg: formDataProductService.name })"
     v-model:modal="dialogServiceEdit"