diff --git a/events/templates/events/event_detail.html b/events/templates/events/event_detail.html
index 2e8108b..022284a 100644
--- a/events/templates/events/event_detail.html
+++ b/events/templates/events/event_detail.html
@@ -5,29 +5,31 @@
 </head>
 <body>
 
+<div class="flex justify-center items-center">
+
+    <div class="w-[96rem] p-4">
 
 {% for exception in exceptions %}
-    <h1>{{ exception.type }}: {{ exception.value }}</h1>
-    <b>{{ parsed_data.request.url }}</b><br>
+    <h1 class="text-3xl mt-4">{{ exception.type }}</h1>
+    <div class="text-2xl">{{ exception.value }}</div>
+    <div class="italic mt-4">{{ parsed_data.request.method }} {{ parsed_data.request.url }}</div><br>
 
     {% for frame in exception.stacktrace.frames %}
         
-        <p>
-            <br>
-            <b>{{ frame.filename }} line {{ frame.lineno }}, in {{ frame.function }}.</b><br>
+        <div class="font-mono">
+            <div class="font-bold">{{ frame.filename }} line {{ frame.lineno }}, in {{ frame.function }}.</div>
 
-            <pre>
+            <div class="whitespace-pre-wrap">
 {% for line in frame.pre_context %}{{ line }}
-{% endfor %}<b>{{ frame.context_line }}</b>
-{% for line in frame.post_context %}{{ line }}
+{% endfor %}<div class="font-bold bg-slate-200 w-full">{{ frame.context_line }}</div>{% for line in frame.post_context %}{{ line }}
 {% endfor %}
-            </pre>
+            </div>
 
             {% for var, value in frame.vars.items %}
             <b>{{ var }}</b>: <i>{{ value }}</i></br>
             {% endfor %} 
 
-        </p>
+        </div>
     
     {% endfor %}
 
@@ -35,6 +37,9 @@
 
 {% endfor %}
 
+    </div>
+
+</div>
 
 </body>
 </html>
diff --git a/theme/static/css/dist/styles.css b/theme/static/css/dist/styles.css
index 0d25460..4cd5b41 100644
--- a/theme/static/css/dist/styles.css
+++ b/theme/static/css/dist/styles.css
@@ -779,11 +779,27 @@ select {
   position: sticky;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .block {
   display: block;
 }
@@ -816,6 +832,30 @@ select {
   height: 100vh;
 }
 
+.w-72 {
+  width: 18rem;
+}
+
+.w-96 {
+  width: 24rem;
+}
+
+.w-\[32rem\] {
+  width: 32rem;
+}
+
+.w-\[64rem\] {
+  width: 64rem;
+}
+
+.w-\[96rem\] {
+  width: 96rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -836,6 +876,10 @@ select {
   justify-content: center;
 }
 
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .border {
   border-width: 1px;
 }
@@ -845,6 +889,25 @@ select {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.bg-slate-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
+}
+
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -853,11 +916,51 @@ select {
   font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
 }
 
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-black {
+  font-weight: 900;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.italic {
+  font-style: italic;
+}
+
 .leading-normal {
   line-height: 1.5;
 }
