diff --git a/new/index.js b/new/index.js
new file mode 100644
index 0000000..8eb1542
--- /dev/null
+++ b/new/index.js
@@ -0,0 +1,35 @@
+function updateEventsTable() {
+    fetch('/api/planer')
+        .then(function (response) { return response.json(); })
+        .then(function (data) {
+        var events = JSON.parse(data.events);
+        var tableBody = document.querySelector('#events tbody');
+        // macht die tabelle voll
+        events.forEach(function (event) {
+            var row = document.createElement('tr');
+            var nameCell = document.createElement('td');
+            var timeCell = document.createElement('td');
+            var statusCell = document.createElement('td');
+            var manageCell = document.createElement('td');
+            nameCell.textContent = event.name;
+            timeCell.textContent = event.time;
+            statusCell.textContent = 'Wird wohl noch kommen';
+            // Buttons zum bearbeiten eines events. Die bearbeitung muss aber noch gebaut werden
+            var editButton = document.createElement('button');
+            var deleteButton = document.createElement('button');
+            editButton.classList.add('button-wrapper');
+            deleteButton.classList.add('button-wrapper');
+            editButton.innerHTML = '<img src="/static/icons/edit.png" alt="Edit">';
+            deleteButton.innerHTML = '<img src="/static/icons/x.png" alt="Delete">';
+            manageCell.appendChild(editButton);
+            manageCell.appendChild(deleteButton);
+            row.appendChild(nameCell);
+            row.appendChild(timeCell);
+            row.appendChild(statusCell);
+            row.appendChild(manageCell);
+            tableBody.appendChild(row);
+        });
+    })
+        .catch(function (error) { return console.error('Error fetching events:', error); });
+}
+updateEventsTable();
diff --git a/new/index.ts b/new/index.ts
new file mode 100644
index 0000000..f0c24d4
--- /dev/null
+++ b/new/index.ts
@@ -0,0 +1,44 @@
+function updateEventsTable() {
+    fetch('/api/planer')
+        .then(response => response.json())
+        .then(data => {
+            const events = JSON.parse(data.events);
+            const tableBody = document.querySelector<HTMLTableSectionElement>('#events tbody');
+
+            // macht die tabelle voll
+            events.forEach((event: { name: string; time: string }) => {
+                const row = document.createElement('tr');
+                const nameCell = document.createElement('td');
+                const timeCell = document.createElement('td');
+                const statusCell = document.createElement('td');
+                const manageCell = document.createElement('td');
+
+                nameCell.textContent = event.name;
+                timeCell.textContent = event.time;
+                statusCell.textContent = 'Wird wohl noch kommen';
+
+                // Buttons zum bearbeiten eines events. Die bearbeitung muss aber noch gebaut werden
+                const editButton = document.createElement('button');
+                const deleteButton = document.createElement('button');
+
+                editButton.classList.add('button-wrapper');
+                deleteButton.classList.add('button-wrapper');
+
+                editButton.innerHTML = '<img src="/static/icons/edit.png" alt="Edit">';
+                deleteButton.innerHTML = '<img src="/static/icons/x.png" alt="Delete">';
+
+                manageCell.appendChild(editButton);
+                manageCell.appendChild(deleteButton);
+
+                row.appendChild(nameCell);
+                row.appendChild(timeCell);
+                row.appendChild(statusCell);
+                row.appendChild(manageCell);
+
+                tableBody.appendChild(row);
+            });
+        })
+        .catch(error => console.error('Error fetching events:', error));
+}
+
+updateEventsTable();