diff --git a/apps/tickets/templates/tickets/_msg_ticket.html b/apps/tickets/templates/tickets/_msg_ticket.html
index f26d17e5f..b781e1738 100644
--- a/apps/tickets/templates/tickets/_msg_ticket.html
+++ b/apps/tickets/templates/tickets/_msg_ticket.html
@@ -1,34 +1,31 @@
 {% load i18n %}
 <div class="ticket-container">
-    <p class="title">
+    <h1 class="title">
         {{ title | safe }}
-    </p>
+    </h1>
     <div>
         {% for child in content %}
-            <h4 style="color: #333;
-                font-size: 1.1em;
-                margin-top: 20px;
-                border-bottom: 1px solid #ccc;
-                padding-bottom: 5px;
-                background-color: #f7f7f7;">{{ child.title }}</h4>
-            {% for item in child.content %}
-                <li style="overflow: hidden; list-style-type: none;">
-                    <span style="color: #737373;line-height: 2.5em;">{{ item.title }} </span>
-                    <span style="float: right; width: 90%;line-height: 2.5em;">{{ item.value }}</span>
-                </li>
-            {% endfor %}
+            <div class="card">
+                <h2 class="child_title">{{ child.title }}</h2>
+                {% for item in child.content %}
+                    <p class="field-group">
+                        <span class="field-name"><strong>{{ item.title }}:</strong></span>
+                        <span class="field-value">{{ item.value }}</span>
+                    </p>
+                {% endfor %}
+            </div>
         {% endfor %}
     </div>
-    <br>
-    <div>
-        <a href="{{ ticket_detail_url }}" target="_blank">
+    <div class="action_group">
+        <a class="view-link" href="{{ ticket_detail_url }}" target="_blank" rel="noopener">
             {% trans 'View details' %}
         </a>
         <br>
         {% if ticket_approval_url %}
-            <a href="{{ ticket_approval_url }}" target="_blank">
+            <a href="{{ ticket_approval_url }}" target="_blank" rel="noopener">
                 {% trans 'Direct approval' %}
             </a>
         {% endif %}
     </div>
+    <br>
 </div>
diff --git a/apps/tickets/templates/tickets/approve_check_password.html b/apps/tickets/templates/tickets/approve_check_password.html
index fe256bc1c..b82ef76cc 100644
--- a/apps/tickets/templates/tickets/approve_check_password.html
+++ b/apps/tickets/templates/tickets/approve_check_password.html
@@ -5,55 +5,115 @@
 
 
 {% block content %}
-<div class="col-lg-12">
-    <div class="col-lg-6">
-        <div class="ibox-content">
-            <h2 class="font-bold" style="display: inline">{% trans 'Ticket information' %}</h2>
-            <h1></h1>
-            <div>
+    <div class="col-lg-12">
+        <div class="col-lg-6">
+            <div class="ticket-container">
+                <h2 class="font-bold" style="display: inline-block">{% trans 'Ticket information' %}</h2>
                 {% for child in content %}
-                    <h2>{{ child.title }}</h2>
-                    <hr>
-                    {% for item in child.content %}
-                        <li style="list-style-type:none">
-                            <b>{{ item.title }}: </b> {{ item.value }}
-                        </li>
-                    {% endfor %}
+                    <div class="card">
+                        <h2 class="child_title">{{ child.title }}</h2>
+                        {% for item in child.content %}
+                            <p class="field-group">
+                                <span class="field-name"><strong>{{ item.title }}:</strong></span>
+                                <span class="field-value">{{ item.value }}</span>
+                            </p>
+                        {% endfor %}
+                    </div>
                 {% endfor %}
             </div>
         </div>
-    </div>
-    <div class="col-lg-6">
-        <div class="ibox-content">
-            <img src="{{ INTERFACE.logo_logout }}" style="margin: auto" width="50" height="50">
-            <h2 class="font-bold" style="display: inline">{% trans 'Ticket approval' %}</h2>
-            <h1></h1>
+        <div class="col-lg-6">
             <div class="ibox-content">
-                <p>
-                    {% trans 'Hello' %} {{ user.name }},
-                </p>
-                <p style="text-indent: 3em">
-                    {{ prompt_msg }}
-                </p>
-                <br>
-                <form id="approve-form" action="" method="post" role="form" novalidate="novalidate">
-                    {% csrf_token %}
-                    <div class="form-group" style="">
-                        <button class="btn btn-primary block full-width m-b" name="action" value="approve"
-                        type="submit">
-                            {% trans 'Approval' %}
-                        </button>
-                        <button class="btn btn-primary block full-width m-b" name="action" value="reject"
-                        type="submit">
-                            {% trans 'Reject' %}
-                        </button>
-                    </div>
-                </form>
+                <img src="{{ INTERFACE.logo_logout }}" style="margin: auto" width="50" height="50">
+                <h2 class="font-bold" style="display: inline">{% trans 'Ticket approval' %}</h2>
+                <h1></h1>
+                <div class="ibox-content">
+                    <p>
+                        {% trans 'Hello' %} {{ user.name }},
+                    </p>
+                    <p style="text-indent: 3em">
+                        {{ prompt_msg }}
+                    </p>
+                    <br>
+                    <form id="approve-form" action="" method="post" role="form" novalidate="novalidate">
+                        {% csrf_token %}
+                        <div class="form-group" style="">
+                            <button class="btn btn-primary block full-width m-b" name="action" value="approve"
+                                    type="submit">
+                                {% trans 'Approval' %}
+                            </button>
+                            <button class="btn btn-primary block full-width m-b" name="action" value="reject"
+                                    type="submit">
+                                {% trans 'Reject' %}
+                            </button>
+                        </div>
+                    </form>
+                </div>
             </div>
         </div>
     </div>
-</div>
-<style>
+    <style>
+        .font-bold {
+            margin: 24px 0 0 24px
+        }
 
-</style>
+        .ticket-container {
+            flex-shrink: 0;
+            border-radius: 4px;
+            background: #FFF;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 24px; /* 150% */
+
+
+            .card {
+                .child_title {
+                    padding-top: 16px;
+                    margin: 0 0 12px 16px;
+                    display: inline-flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+                    color: #1F2329;
+                    font-size: 16px;
+                    font-style: normal;
+                    font-weight: 500;
+                }
+
+                @media (max-width: 400px) {
+                    margin: 8px
+                }
+                margin: 24px 0 0 24px;
+                width: 95%;
+                display: inline-block;
+                border-radius: 4px;
+                background: #F5F6F7;
+            }
+
+            .card:last-child {
+                margin-bottom: 24px;
+            }
+
+            .field-group {
+                font-size: 14px;
+                padding-inline-start: 0;
+                margin: 0;
+                width: 95%;
+
+                .field-name {
+                    margin: 4px 0 4px 16px;
+                    color: #646A73;
+                    display: inline-block;
+
+                    :is(strong) {
+                        font-weight: 400 !important;
+                    }
+                }
+
+                .field-value {
+                    color: #1F2329;
+                    display: inline-block;
+                }
+            }
+        }
+    </style>
 {% endblock %}