diff --git a/ticketsystem/templates/ticketsystem/index.html b/ticketsystem/templates/ticketsystem/index.html
index 8895610..6301833 100644
--- a/ticketsystem/templates/ticketsystem/index.html
+++ b/ticketsystem/templates/ticketsystem/index.html
@@ -182,8 +182,8 @@
                                 <td class="px-4 py-3 text-center text-sm font-bold text-gray-500">#{{ ticket.id }}</td>
                                 <td class="px-4 py-3">
                                     <a href="{% url 'detail' ticket.pk %}"
-                                       class="font-bold text-blue-600 hover:text-blue-800 hover:underline">
-                                        {{ ticket.title }}
+                                       class="font-bold text-blue-600 hover:text-blue-800 hover:underline block break-words">
+                                        {{ ticket.title|truncatechars:30 }}
                                     </a>
                                 </td>
                                 <td class="px-4 py-3 text-center text-sm">
@@ -195,7 +195,7 @@
                                     {% if ticket.status == 'new' %}
                                         <span class="px-2 py-1 rounded-full text-xs font-bold bg-blue-500 text-white">{{ ticket.get_status_display }}</span>
                                     {% elif ticket.status == 'in_progress' %}
-                                        <span class="px-2 py-1 rounded-full text-xs font-bold bg-yellow-400 text-gray-900">
+                                        <span class="px-2 py-1 rounded-full text-xs font-bold bg-yellow-400 text-gray-900 whitespace-nowrap">
                                             {{ ticket.get_status_display }}
                                         </span>
                                     {% elif ticket.status == 'resolved' %}
@@ -206,7 +206,7 @@
                                         <span class="px-2 py-1 rounded-full text-xs font-bold bg-gray-600 text-white">{{ ticket.get_status_display }}</span>
                                     {% endif %}
                                     <td class="px-4 py-3 text-center">
-                                        <span class="px-2 py-1 rounded-full text-xs font-bold {% if ticket.mistake == 'typo' %}bg-blue-500 {% elif ticket.mistake == 'formatting_issue' %}bg-purple-500 {% elif ticket.mistake == 'missing_content' %}bg-red-500 {% elif ticket.mistake == 'outdated_content' %}bg-orange-500 {% elif ticket.mistake == 'audio_problem' %}bg-green-500 {% elif ticket.mistake == 'video_problem' %}bg-yellow-500 {% elif ticket.mistake == 'other' %}bg-gray-500 {% else %}bg-gray-400 {% endif %} text-white">
+                                        <span class="px-2 py-1 rounded-full text-xs font-bold whitespace-nowrap {% if ticket.mistake == 'typo' %}bg-blue-500 {% elif ticket.mistake == 'formatting_issue' %}bg-purple-500 {% elif ticket.mistake == 'missing_content' %}bg-red-500 {% elif ticket.mistake == 'outdated_content' %}bg-orange-500 {% elif ticket.mistake == 'audio_problem' %}bg-green-500 {% elif ticket.mistake == 'video_problem' %}bg-yellow-500 {% elif ticket.mistake == 'other' %}bg-gray-500 {% else %}bg-gray-400 {% endif %} text-white">
                                             {{ ticket.get_mistake_display }}
                                         </span>
                                     </td>