diff --git a/Services/client/src/components/DialogDelete.vue b/Services/client/src/components/DialogDelete.vue
index c6bf7e5..6b07256 100644
--- a/Services/client/src/components/DialogDelete.vue
+++ b/Services/client/src/components/DialogDelete.vue
@@ -21,15 +21,22 @@ const props = withDefaults(
   >
     <q-card style="width: 400px">
       <q-card-section>
-        <span class="text-h6">
-          <q-icon name="error" color="negative" size="2.5rem" />แจ้งเตือนการลบ
-        </span>
+        <div class="flex items-center">
+          <div class="q-pa-sm">
+            <div style="border-radius: 50%" class="bg-secondary q-pa-sm">
+              <q-icon
+                name="mdi-trash-can-outline"
+                color="negative"
+                size="2.5rem"
+              />
+            </div>
+          </div>
+          <div>
+            <h6 class="q-my-none">ยืนยันการลบข้อมูล</h6>
+            <p class="q-my-none">ต้องการยืนยันการลบข้อมูลนี้หรือไม่</p>
+          </div>
+        </div>
       </q-card-section>
-
-      <q-card-section class="q-pt-none">
-        ถ้าดำเนินการต่อจะทำการลบ
-      </q-card-section>
-
       <q-card-actions align="right" class="bg-white text-primary">
         <q-space />
         <q-btn
@@ -41,10 +48,9 @@ const props = withDefaults(
         />
 
         <q-btn
-          flat
+          color="negative"
           v-close-popup
           label="ลบ"
-          class="text-red"
           @click="() => $emit('confirm')"
           id="dialogDeleteConfirm"
         />