diff --git a/events/templates/events/event_detail.html b/events/templates/events/event_detail.html
index 022284a..d2e657b 100644
--- a/events/templates/events/event_detail.html
+++ b/events/templates/events/event_detail.html
@@ -19,18 +19,18 @@
         <div class="font-mono">
             <div class="font-bold">{{ frame.filename }} line {{ frame.lineno }}, in {{ frame.function }}.</div>
 
-            <div class="whitespace-pre-wrap">
-{% for line in frame.pre_context %}{{ line }}
-{% endfor %}<div class="font-bold bg-slate-200 w-full">{{ frame.context_line }}</div>{% for line in frame.post_context %}{{ line }}
-{% endfor %}
-            </div>
+<ol class="list-decimal ml-12" start="100">
+{% for line in frame.pre_context %}<li><div class="whitespace-pre w-full">{{ line }} {# leave space to avoid collapse #}</div></li>{% endfor %}
+<li><div class="whitespace-pre font-bold bg-slate-200 w-full">{{ frame.context_line }} {# leave space to avoid collapse #}</div></li>
+{% for line in frame.post_context %}<li><div class="whitespace-pre w-full">{{ line }} {# leave space to avoid collapse #}</div></li>{% endfor %}
+</ol>
 
             {% for var, value in frame.vars.items %}
             <b>{{ var }}</b>: <i>{{ value }}</i></br>
             {% endfor %} 
 
         </div>
-    
+
     {% endfor %}
 
     {% if not forloop.last %}While handling the above exception, yad yad<br>{% endif %}
diff --git a/theme/static/css/dist/styles.css b/theme/static/css/dist/styles.css
index 4cd5b41..7283d47 100644
--- a/theme/static/css/dist/styles.css
+++ b/theme/static/css/dist/styles.css
@@ -783,6 +783,14 @@ select {
   margin: 1rem;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
+.m-16 {
+  margin: 4rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -800,6 +808,14 @@ select {
   margin-top: 2rem;
 }
 
+.ml-16 {
+  margin-left: 4rem;
+}
+
+.ml-12 {
+  margin-left: 3rem;
+}
+
 .block {
   display: block;
 }
@@ -864,6 +880,14 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.list-decimal {
+  list-style-type: decimal;
+}
+
+.list-none {
+  list-style-type: none;
+}
+
 .content-start {
   align-content: flex-start;
 }
@@ -876,6 +900,10 @@ select {
   justify-content: center;
 }
 
+.whitespace-pre {
+  white-space: pre;
+}
+
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }