diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
index b2e916f9..51340347 100644
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/src/components/04_product-service/FormServiceWork.vue
@@ -50,7 +50,7 @@ function confirmDelete(items: unknown[], index: number) {
 
 <template>
   <div class="column col-12 full-height">
-    <div class="app-text-muted row items-start">
+    <div class="app-text-muted row items-start q-mb-md">
       • {{ $t(`workInformation`) }}
       <q-btn
         v-if="!readonly"
@@ -65,8 +65,9 @@ function confirmDelete(items: unknown[], index: number) {
       />
     </div>
 
-    <div v-if="workItems.length > 0" class="col q-gutter-y-md">
+    <div v-if="workItems.length > 0" class="col q-gutter-y-md row">
       <WorkManagementComponent
+        class="col-12"
         v-for="(work, index) in workItems"
         :key="work.id"
         :index="index"
@@ -86,6 +87,7 @@ function confirmDelete(items: unknown[], index: number) {
         @manage-work-name="$emit('manageWorkName')"
         @work-properties="$emit('workProperties', index)"
       ></WorkManagementComponent>
+      <div class="col-12" style="height: 12px"></div>
     </div>
 
     <div
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index c8698fc3..0ba9e88b 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -81,8 +81,7 @@ defineEmits<{
             <div
               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'}`"
+              style="background-color: var(--surface-1); z-index: 2"
               @click="() => (readonly ? '' : fetchListOfWork())"
             >
               <span class="text-body2" style="color: var(--foreground)">
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 224976dc..27dcbbf0 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1933,7 +1933,7 @@ watch(currentStatus, async () => {
   <!-- edit service -->
   <FormDialog
     no-address
-    no-app-box
+    :no-app-box="currentServiceTab !== 'workInformation'"
     :edit="!(formDataProductService.status === 'INACTIVE')"
     height="95vh"
     :isEdit="infoServiceEdit"
@@ -1976,7 +1976,10 @@ watch(currentStatus, async () => {
       />
     </template>
 
-    <div v-if="currentServiceTab === 'serviceInformation'" class="col-10">
+    <div
+      v-if="currentServiceTab === 'serviceInformation'"
+      class="col-md-10 col-sm-12"
+    >
       <div class="surface-1 rounded bordered q-pa-lg full-width row">
         <BasicInformation
           :readonly="!infoServiceEdit"
@@ -2009,10 +2012,7 @@ watch(currentStatus, async () => {
       </div>
     </div>
 
-    <div
-      v-if="currentServiceTab === 'workInformation'"
-      class="surface-1 rounded bordered col-10 q-pa-lg"
-    >
+    <template #information>
       <FormServiceWork
         :readonly="!infoServiceEdit"
         v-model:work-items="workItems"
@@ -2034,7 +2034,7 @@ watch(currentStatus, async () => {
           }
         "
       />
-    </div>
+    </template>
   </FormDialog>
 </template>