diff --git a/assets/js/events.js b/assets/js/events.js
index 0732797..6bd6742 100644
--- a/assets/js/events.js
+++ b/assets/js/events.js
@@ -13,10 +13,7 @@ document.addEventListener("DOMContentLoaded", function() {
     const addEvent = document.getElementById("addEvent");
     const eventContainer = document.getElementById("eventContainer");
     const row = document.getElementById("events-list");
-    const eventHeader = document.getElementById("event-header");
-    const eventMembers = document.getElementById("event-members");
-    const eventExpenses = document.getElementById("event-expenses");
-    
+    const eventModificationContainer = document.getElementById("event-modifications");
     
     // function will display array of events
     function renderEvents() {
@@ -29,9 +26,18 @@ document.addEventListener("DOMContentLoaded", function() {
     
     // The event details will render here.  Currently there is just an H2 with the event name
     function renderEventDetails(eventName) {
-        eventHeader.innerHTML = `<h2>${eventName}</h2>`;
-        eventMembers.innerHTML = `<h3>members</h3>`;
-        eventExpenses.innerHTML = `<h3>expenses</h3>`;
+
+        const eventHeader = document.createElement("h2");
+        eventHeader.textContent = `${eventName}`;
+        const eventMembers = document.createElement("h3");
+        eventMembers.textContent = "Members";
+        const eventExpenses = document.createElement("h3");
+        eventExpenses.textContent = "Expenses";
+
+        eventModificationContainer.appendChild(eventHeader);
+        eventModificationContainer.appendChild(eventMembers);
+        eventModificationContainer.appendChild(eventExpenses);
+
     }
     
     // Creates an individual event list item and a delete buttton
diff --git a/index.html b/index.html
index 7ec4a28..a930a48 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Team 2 Practice website</title>
     <link rel="stylesheet" href="assets/css/styles.css">
-    <script src="assets/js/events.js"></script>
+
     
 
 </head>
@@ -30,5 +30,8 @@ <h2>User Events</h2>
        <input type="number" placeholder="Add Expense">
     </section>
 
+
+    <script src="assets/js/events.js"></script>
+    <script src="assets/js/natalie.js"></script>
 </body>
 </html>
\ No newline at end of file