diff --git a/src/modules/02_users/components/05_responsIbilities/DialogResponsibilities.vue b/src/modules/02_users/components/05_responsIbilities/DialogResponsibilities.vue
index f9ce6dd7..a82c7b8f 100644
--- a/src/modules/02_users/components/05_responsIbilities/DialogResponsibilities.vue
+++ b/src/modules/02_users/components/05_responsIbilities/DialogResponsibilities.vue
@@ -121,21 +121,25 @@ watch(
 </script>
 
 <template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 30%">
+  <q-dialog v-model="modal" persistent full-height>
+    <q-card class="col-12" style="min-width: 550px">
       <q-form greedy @submit.prevent="onSubmit">
         <DialogHeader tittle="กำหนดหน้าที่ความรับผิดชอบ" :close="closeDialog" />
         <q-separator />
-        <q-card-section>
+
+        <q-card-section style="max-height: 84vh" class="scroll">
           <div
             v-for="(item, index) in sysTypeOptions"
             :key="index"
             class="col-12"
           >
-            <div class="row q-ml-md q-col-gutter-sm">
-              <div class="text-weight-medium text-body2">
+            <q-card bordered class="row col-12 text-dark q-mt-sm">
+              <div
+                class="bg-grey-1 q-pa-xs col-12 row items-center text-weight-bold"
+              >
                 {{ item.sysName }}
               </div>
+              <div class="col-12"><q-separator /></div>
               <div class="col-12">
                 <q-list class="q-mt-none">
                   <q-item
@@ -160,7 +164,7 @@ watch(
                   </q-item>
                 </q-list>
               </div>
-            </div>
+            </q-card>
           </div>
         </q-card-section>