diff --git a/kursy/templates/calendar.html b/kursy/templates/calendar.html
index b93e504..75a8f6d 100644
--- a/kursy/templates/calendar.html
+++ b/kursy/templates/calendar.html
@@ -118,42 +118,26 @@
       eventClick: function(info) {
         // prevent default navigation
         info.jsEvent.preventDefault();
-        // show event's URL page in a modal via AJAX
         const eventUrl = info.event.url;
-        const modal = document.createElement('div');
-        modal.classList.add('fixed', 'inset-0', 'flex', 'items-center', 'justify-center', 'z-50');
-
-        const modalContent = document.createElement('div');
-        modalContent.classList.add('bg-white', 'rounded-lg', 'p-6', 'max-w-lg', 'w-full', 'relative');
-
-         // load event details via AJAX
-        fetch(eventUrl)
-          .then(response => response.text())
-          .then(html => {
-            modalContent.innerHTML = html;
-          })
-          .catch(error => {
-            modalContent.innerHTML = '<p class="text-red-500">Failed to load event details.</p>';
-          });
-
-         modal.appendChild(modalContent);
-        document.body.appendChild(modal);
-
-        const closeButton = document.createElement('button');
-        closeButton.classList.add('absolute', 'top-2', 'right-2', 'text-gray-500', 'hover:text-gray-700', 'focus:outline-none');
-        closeButton.innerHTML = '&times;';
-        closeButton.addEventListener('click', () => {
-          document.body.removeChild(modal);
-        });
-        modalContent.appendChild(closeButton);
+        if (eventUrl) {
+          showModal(info.event.id);
+        }
       },
     });
     calendar.render();
+
+    // if ?modal=event_id is in the url, open the modal for that event
+    const urlParams = new URLSearchParams(window.location.search);
+    const modalEventId = urlParams.get('modal');
+    if (modalEventId) {
+      showModal(modalEventId);
+    }
   });
 </script>
 {% endblock %}
 
 {% block content %}
-<h2>{% trans "Click a course to see details and sign up." %}</h2>
-<div id="calendar"></div>
+<div class="overflow-auto">
+  <div id="calendar" class="min-w-xl"></div>
+</div>
 {% endblock %}