diff --git a/resources/views/components/error-dialog.blade.php b/resources/views/components/error-dialog.blade.php
index 2af1477..e4022c1 100644
--- a/resources/views/components/error-dialog.blade.php
+++ b/resources/views/components/error-dialog.blade.php
@@ -11,7 +11,7 @@
             </div>
             
             <h3 id="modal-title-{{ $id }}" class="text-xl font-bold text-slate-800 mb-2">{{ $title }}</h3>
-            <p class="text-slate-500 text-sm leading-relaxed">{{ $message }}</p>
+            <p class="text-slate-500 text-sm leading-relaxed whitespace-pre-line">{{ $message }}</p>
         </div>
         <div class="px-6 py-4 bg-slate-50 flex justify-center border-t border-slate-100">
             <button type="button" onclick="{{ $onclick ?? "closeModal('{$id}')" }}" class="w-full sm:w-auto px-6 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg shadow-sm transition-all duration-200 cursor-pointer text-center">
diff --git a/resources/views/components/info-dialog.blade.php b/resources/views/components/info-dialog.blade.php
index 2274eed..baf3e89 100644
--- a/resources/views/components/info-dialog.blade.php
+++ b/resources/views/components/info-dialog.blade.php
@@ -11,7 +11,7 @@
             </div>
             
             <h3 id="modal-title-{{ $id }}" class="text-xl font-bold text-slate-800 mb-2">{{ $title }}</h3>
-            <p class="text-slate-500 text-sm leading-relaxed">{{ $message }}</p>
+            <p class="text-slate-500 text-sm leading-relaxed whitespace-pre-line">{{ $message }}</p>
         </div>
         <div class="px-6 py-4 bg-slate-50 flex justify-center border-t border-slate-100">
             <button type="button" onclick="{{ $onclick ?? "closeModal('{$id}')" }}" class="w-full sm:w-auto px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg shadow-sm transition-all duration-200 cursor-pointer text-center">
diff --git a/resources/views/components/success-dialog.blade.php b/resources/views/components/success-dialog.blade.php
index e419181..6fa2c53 100644
--- a/resources/views/components/success-dialog.blade.php
+++ b/resources/views/components/success-dialog.blade.php
@@ -11,7 +11,7 @@
             </div>
             
             <h3 id="modal-title-{{ $id }}" class="text-xl font-bold text-slate-800 mb-2">{{ $title }}</h3>
-            <p class="text-slate-500 text-sm leading-relaxed">{{ $message }}</p>
+            <p class="text-slate-500 text-sm leading-relaxed whitespace-pre-line">{{ $message }}</p>
         </div>
         <div class="px-6 py-4 bg-slate-50 flex justify-center border-t border-slate-100">
             <button type="button" onclick="closeModal('{{ $id }}')" class="w-full sm:w-auto px-6 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-lg shadow-sm transition-all duration-200 cursor-pointer text-center">
diff --git a/resources/views/components/user-avatar-section.blade.php b/resources/views/components/user-avatar-section.blade.php
index e772753..4e6d4a8 100644
--- a/resources/views/components/user-avatar-section.blade.php
+++ b/resources/views/components/user-avatar-section.blade.php
@@ -14,7 +14,7 @@
 </div>
 
 @if($mode !== 'edit')
-    <x-error-dialog id="modal-avatar-size-error" title="Ảnh quá lớn" message="Ảnh đại diện không được vượt quá 2MB. Vui lòng chọn ảnh nhẹ hơn!" buttonText="Đã hiểu" />
+    <x-error-dialog id="modal-avatar-size-error" title="Ảnh quá lớn" :message="'Ảnh đại diện không được vượt quá 2MB.\nVui lòng chọn ảnh nhẹ hơn!'" buttonText="Đã hiểu" />
 
 @once
     @push('scripts')
diff --git a/resources/views/components/warning-dialog.blade.php b/resources/views/components/warning-dialog.blade.php
index 56ca39f..fc3e6da 100644
--- a/resources/views/components/warning-dialog.blade.php
+++ b/resources/views/components/warning-dialog.blade.php
@@ -11,7 +11,7 @@
             </div>
             
             <h3 id="modal-title-{{ $id }}" class="text-xl font-bold text-slate-800 mb-2">{{ $title }}</h3>
-            <p class="text-slate-500 text-sm leading-relaxed">{{ $message }}</p>
+            <p class="text-slate-500 text-sm leading-relaxed whitespace-pre-line">{{ $message }}</p>
         </div>
         <div class="px-6 py-4 bg-slate-50 flex justify-center border-t border-slate-100">
             <button type="button" onclick="{{ $onclick ?? "closeModal('{$id}')" }}" class="w-full sm:w-auto px-6 py-2 bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold rounded-lg shadow-sm transition-all duration-200 cursor-pointer text-center">