diff --git a/src/main/resources/web/assets/css/chart-design.css b/src/main/resources/web/assets/css/chart-design.css
index e1d5ce8f1..ffa99e19b 100644
--- a/src/main/resources/web/assets/css/chart-design.css
+++ b/src/main/resources/web/assets/css/chart-design.css
@@ -298,8 +298,8 @@ a.ui-draggable.ui-draggable-dragging {
 
 .data-info ul li i.icon,
 .data-info ul.fields li a::before {
-  width: 18px;
   display: inline-block;
+  width: 15px;
   color: #4285f4;
 }
 
diff --git a/src/main/resources/web/assets/css/triggers.css b/src/main/resources/web/assets/css/triggers.css
index 643bfffd2..cdcdbf77c 100644
--- a/src/main/resources/web/assets/css/triggers.css
+++ b/src/main/resources/web/assets/css/triggers.css
@@ -420,19 +420,28 @@ textarea.formula-code + .fields-vars {
   color: #edebe6;
 }
 
+.dropdown-item > em,
 .fields ul li.flag-DECIMAL > a::before,
 .fields ul li.flag-NUMBER > a::before,
 .fields ul li.flag-DATE > a::before,
-.fields ul li.flag-DATETIME > a::before {
-  content: 'N';
+.fields ul li.flag-DATETIME > a::before,
+.fields ul li.flag-TIME > a::before {
+  content: '#';
   width: 15px;
   display: inline-block;
   color: #4285f4;
   font-size: 0.9rem;
+  font-style: normal;
+}
+
+.fields ul li.flag-DECIMAL > a::before,
+.fields ul li.flag-NUMBER > a::before {
+  content: 'N';
 }
 
 .fields ul li.flag-DATE > a::before,
-.fields ul li.flag-DATETIME > a::before {
+.fields ul li.flag-DATETIME > a::before,
+.fields ul li.flag-TIME > a::before{
   content: 'D';
 }
 
diff --git a/src/main/resources/web/assets/js/trigger/trigger-design.js b/src/main/resources/web/assets/js/trigger/trigger-design.js
index be87c38ae..cb115bc25 100644
--- a/src/main/resources/web/assets/js/trigger/trigger-design.js
+++ b/src/main/resources/web/assets/js/trigger/trigger-design.js
@@ -497,6 +497,9 @@ class EditorWithFieldVars extends React.Component {
         </a>
         <div className="dropdown-menu auto-scroller dropdown-menu-right" ref={(c) => (this._$fieldVars = c)}>
           {(this.state.fieldVars || []).map((item) => {
+            let typeMark = 'T'
+            if (['DATE', 'DATETIME', 'TIME'].includes(item.type)) typeMark = 'D'
+            else if (['NUMBER', 'DECIMAL'].includes(item.type)) typeMark = 'N'
             return (
               <a
                 className="dropdown-item"
@@ -504,6 +507,7 @@ class EditorWithFieldVars extends React.Component {
                 onClick={() => {
                   $(this._$content).insertAtCursor(`{${item.name}}`)
                 }}>
+                <em>{typeMark}</em>
                 {item.label}
               </a>
             )
diff --git a/src/main/resources/web/dashboard/chart-design.html b/src/main/resources/web/dashboard/chart-design.html
index 438a3d81d..a5d44e9c1 100644
--- a/src/main/resources/web/dashboard/chart-design.html
+++ b/src/main/resources/web/dashboard/chart-design.html
@@ -17,7 +17,7 @@
               <ul class="list-unstyled esource">
                 <li>
                   <span class="text-bold">
-                    <i class="zmdi icon" th:classappend="|zmdi-${entityIcon}|"></i>
+                    <i class="zmdi icon fs-16 down-1" th:classappend="|zmdi-${entityIcon}|"></i>
                     [[${entityLabel}]]
                   </span>
                 </li>