diff --git a/kursy/templates/occurrence_detail.html b/kursy/templates/occurrence_detail.html
new file mode 100644
index 0000000..865ce00
--- /dev/null
+++ b/kursy/templates/occurrence_detail.html
@@ -0,0 +1,62 @@
+{% load static i18n wagtailcore_tags wagtailimages_tags %}
+
+<h2 class="text-3xl font-bold mb-4">{{ event.title }}</h2>
+
+{% if event.image %}
+  {% image event.image original alt=event.title class="w-full max-h-64 rounded-lg mb-3 object-cover" %}
+{% endif %}
+
+<div class="flex items-center gap-2 text-gray-600 mb-2 text-sm">
+  <i class="fi fi-br-clock-three leading-0"></i>
+  <span>{{ occurrence.start|date }}, {{ occurrence.start|time }} – {{ occurrence.end|date }}, {{ occurrence.end|time }}</span>
+</div>
+
+<div class="flex items-center gap-2 text-gray-600 mb-6 text-sm {% if occurrence.attendees_count >= event.max_attendees and event.max_attendees is not None and event.max_attendees != 0 %}text-red-600{% endif %}">
+  <i class="fi fi-br-user leading-0"></i>
+  <span>
+    {{ occurrence.attendees_count }}{% if event.max_attendees is not None and event.max_attendees != 0 %} / {{ event.max_attendees }}{% endif %}
+  </span>
+</div>
+
+<div class="not-prose my-4">
+  {% if occurrence.is_past %}
+    <div class="p-4 bg-gray-100 border-l-4 border-gray-500 text-gray-700">
+      <p>{% trans "This event has already ended. Please check our calendar for upcoming events." %}</p>
+    </div>
+  {% elif user_signed_up %}
+    <div class="p-4 bg-green-100 border-l-4 border-green-500 text-green-700">
+      <p>{% trans "You are signed up for this event. We look forward to seeing you there!" %}</p>
+      <!-- cancel button -->
+      <a href="{% url 'occurrence_signout' occurrence.id %}" class="mt-4 inline-block bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition">
+        {% trans "Cancel Sign Up" %}
+      </a>
+    </div>
+  {% elif not user.is_authenticated %}
+    {# If the user is not authenticated, we can prompt them to log in or sign up. #}
+    <div class="p-4 bg-blue-100 border-l-4 border-blue-500 text-blue-700">
+      <p>{% trans "You need to be logged in to sign up for this event. Please log in or sign up to reserve your spot." %}</p>
+  <a href="{% url 'account_login' %}?next={% url 'calendar' %}?modal={{ occurrence.id }}" class="mt-4 inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
+        {% trans "Login" %}
+      </a>
+  <a href="{% url 'account_signup' %}?next={% url 'calendar' %}?modal={{ occurrence.id }}" class="mt-4 inline-block bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition ml-2">
+        {% trans "Sign Up" %}
+      </a>
+    </div>
+  {% elif occurrence.attendees_count >= event.max_attendees and event.max_attendees is not None and event.max_attendees != 0 %}
+    <div class="p-4 bg-red-100 border-l-4 border-red-500 text-red-700">
+      <p>{% trans "This event is fully booked. Please check back later for any cancellations." %}</p>
+    </div>
+  {% else %}
+    <div class="p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700">
+      <p>{% trans "You are not signed up for this event. Please sign up to reserve your spot." %}</p>
+      <a href="{% url 'occurrence_signup' occurrence.id %}" class="mt-4 inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
+        {% trans "Sign Up for Event" %}
+      </a>
+    </div>
+  {% endif %}
+</div>
+
+<div class="prose">
+  {{ page.description | richtext }}
+</div>
+