diff --git a/core/lib/utils/html/html_template.dart b/core/lib/utils/html/html_template.dart
index c9a06e955..887924fe2 100644
--- a/core/lib/utils/html/html_template.dart
+++ b/core/lib/utils/html/html_template.dart
@@ -94,18 +94,19 @@ class HtmlTemplate {
         align-items: flex-start;
         gap: 10px;
       }
-  
-      .placeholder-icon {
-        width: 32px;
-        height: 32px;
+      
+      .circle {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: #f2f2f2;
-        border-radius: 50%;
-        color: #d9534f;
+        background: linear-gradient(to bottom, #a8e4d1, #56c2a6);
         font-size: 18px;
         font-weight: bold;
+        color: white;
+        text-transform: uppercase;
         flex-shrink: 0;
       }
   
diff --git a/core/lib/utils/preview_eml_file_utils.dart b/core/lib/utils/preview_eml_file_utils.dart
index 794ecfdbe..b25dcc164 100644
--- a/core/lib/utils/preview_eml_file_utils.dart
+++ b/core/lib/utils/preview_eml_file_utils.dart
@@ -1,5 +1,6 @@
 
 import 'package:core/data/model/preview_attachment.dart';
+import 'package:core/presentation/extensions/string_extension.dart';
 import 'package:core/utils/app_logger.dart';
 import 'package:core/utils/html/html_template.dart';
 import 'package:core/utils/html/html_utils.dart';
@@ -36,7 +37,7 @@ class PreviewEmlFileUtils {
           <!-- Email Header -->
           <div class="email-header">
             <!-- Placeholder icon -->
-            <div class="placeholder-icon">?</div>
+            <div class="circle">${(senderName ?? senderEmailAddress ?? '?').firstLetterToUpperCase}</div>
       
             <!-- Email information -->
             <div class="email-info">