diff --git a/public/js/home.js b/public/js/home.js
index 700bef8..198b122 100644
--- a/public/js/home.js
+++ b/public/js/home.js
@@ -1,5 +1,6 @@
 document.addEventListener('DOMContentLoaded', () => {
     const textsList = document.getElementById('texts-list');
+    const createPlanModal = document.getElementById('create-plan-modal');
 
     async function loadTexts() {
         const response = await fetch('/api/texts');
@@ -13,5 +14,20 @@ document.addEventListener('DOMContentLoaded', () => {
             .join('');
     }
 
+    function openCreatePlanModal(textId) {
+        createPlanModal.dataset.textId = textId;
+        createPlanModal.hidden = false;
+    }
+
+    textsList.addEventListener('click', (clickEvent) => {
+        const createPlanButton = clickEvent.target.closest(
+            'button.create-plan'
+        );
+        if (createPlanButton === null) {
+            return;
+        }
+        openCreatePlanModal(createPlanButton.dataset.textId);
+    });
+
     loadTexts();
 });