diff --git a/main.py b/main.py
index d28dac9..279ffe2 100644
--- a/main.py
+++ b/main.py
@@ -1,40 +1,18 @@
-import logging
-from flask import Flask, render_template, request
-from flask_socketio import SocketIO, emit
+from flask import Flask, render_template
 
 app = Flask(__name__)
-app.config['SECRET_KEY'] = 'geheimeschluessel'
-socketio = SocketIO(app)
-
-# Beispiel-Datenquelle
-table_data = [
-    {"id": 1, "name": "Alice", "age": 25},
-    {"id": 2, "name": "Bob", "age": 30},
-    {"id": 3, "name": "Charlie", "age": 35}
-]
-
-# Konfiguriere das Logging
-logging.basicConfig(level=logging.DEBUG)
-logger = logging.getLogger(__name__)
 
 @app.route('/')
 def index():
-    return render_template('index.html', table_data=table_data)
+    return render_template('index.html')
 
-@app.route('/update_table', methods=['POST'])
-def update_table():
-    updated_data = request.json
-    for row in updated_data:
-        row_id = row['id']
-        for entry in table_data:
-            if entry['id'] == row_id:
-                entry['name'] = row['name']
-                entry['age'] = row['age']
-                break
+@app.route('/projekte')
+def projekte():
+    return render_template('projekte.html')
 
-    socketio.emit('table_update', table_data, broadcast=True)
-    logger.info('Daten aktualisiert: %s', table_data)  # Logge die aktualisierten Daten
-    return 'Daten aktualisiert'
+@app.route('/neuigkeiten')
+def neuigkeiten():
+    return render_template('neuigkeiten.html')
 
 if __name__ == '__main__':
-    socketio.run(app)
+    app.run()
diff --git a/static/css/styles.css b/static/css/styles.css
index cca8e1f..a52303e 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,71 +1,72 @@
-/* styles.css */
+/* style.css */
+
+/* Allgemeine Formatierung */
 body {
-  background-color: #f5f7fa;
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
 }
 
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
+/* Header */
+header {
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
 }
 
-h1 {
-  font-size: 2rem;
-  text-align: center;
-  margin-bottom: 20px;
+nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 }
 
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-bottom: 20px;
+nav ul li {
+  display: inline;
+  margin-right: 10px;
 }
 
-.table th,
-.table td {
-  padding: 10px;
-  border: 1px solid #ddd;
-  text-align: left;
+nav ul li a {
+  color: #fff;
+  text-decoration: none;
 }
 
-.table th {
-  background-color: #f2f2f2;
+/* Hero-Bereich */
+.hero {
+  background-image: url("background.jpg");
+  background-size: cover;
+  color: #fff;
+  padding: 100px;
+  text-align: center;
 }
 
-.table tr:nth-child(even) td {
-  background-color: #fff;
+.hero h1 {
+  font-size: 40px;
 }
 
-.table td.editable {
-  cursor: pointer;
+.hero p {
+  font-size: 20px;
 }
 
-.button {
-  padding: 8px 16px;
-  background-color: #4a86e8;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
+/* Inhaltsbereich */
+.content {
+  background-color: #f5f5f5;
+  padding: 50px;
 }
 
-.category {
-  margin-bottom: 20px;
+.content h2 {
+  color: #333;
+  font-size: 30px;
 }
 
-.category-name {
-  font-size: 1.2rem;
-  margin-bottom: 10px;
+.content p {
+  color: #666;
+  font-size: 18px;
 }
 
-.new-table-button {
-  padding: 8px 16px;
-  background-color: #6ab04c;
+/* Footer */
+footer {
+  background-color: #333;
   color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
+  padding: 10px;
+  text-align: center;
 }
diff --git a/static/js/projekte.js b/static/js/projekte.js
new file mode 100644
index 0000000..e390c6c
--- /dev/null
+++ b/static/js/projekte.js
@@ -0,0 +1,38 @@
+// projekte.js
+
+document.addEventListener("DOMContentLoaded", function() {
+    // Das DOM ist vollständig geladen
+  
+    // Elemente aus dem DOM abrufen
+    var projektForm = document.getElementById("projekt-form");
+    var projektNameInput = document.getElementById("projekt-name");
+    var projekteListe = document.getElementById("projekte-liste");
+  
+    // Eventlistener für das Formular hinzufügen
+    projektForm.addEventListener("submit", function(event) {
+      event.preventDefault(); // Standardformularverhalten verhindern
+  
+      // Den eingegebenen Projektname auslesen
+      var projektName = projektNameInput.value;
+  
+      // Überprüfen, ob der Projektname nicht leer ist
+      if (projektName.trim() !== "") {
+        // Ein neues Listenelement erstellen
+        var neuesProjekt = document.createElement("li");
+        neuesProjekt.textContent = projektName;
+  
+        // Das neue Listenelement zur Projekte-Liste hinzufügen
+        projekteListe.appendChild(neuesProjekt);
+  
+        // Das Eingabefeld leeren
+        projektNameInput.value = "";
+  
+        // Eventlistener für das Entfernen von Projekten hinzufügen
+        neuesProjekt.addEventListener("click", function() {
+          projekteListe.removeChild(neuesProjekt);
+        });
+      }
+    });
+  });
+  
+  
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
new file mode 100644
index 0000000..e69de29
diff --git a/templates/Irgendwann.html b/templates/Irgendwann.html
deleted file mode 100644
index a024e2e..0000000
--- a/templates/Irgendwann.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Meine coole Website</title>
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
-</head>
-<body>
-  <header>
-    <div class="container">
-      <h1>Meine coole Website</h1>
-      <nav>
-        <ul>
-          <li><a href="#">Home</a></li>
-          <li><a href="#">Über uns</a></li>
-          <li><a href="#">Projekte</a></li>
-          <li><a href="#">Kontakt</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-
-  <section id="hero">
-    <div class="container">
-      <h2>Willkommen auf unserer Website</h2>
-      <p>Wir erstellen moderne und ansprechende Websites für Ihr Unternehmen.</p>
-      <a href="#" class="btn">Mehr erfahren</a>
-    </div>
-  </section>
-
-  <section id="features">
-    <div class="container">
-      <div class="feature">
-        <i class="fas fa-mobile-alt"></i>
-        <h3>Responsives Design</h3>
-        <p>Unsere Websites passen sich allen Geräten an und sind auf Mobilgeräten benutzerfreundlich.</p>
-      </div>
-      <div class="feature">
-        <i class="fas fa-palette"></i>
-        <h3>Kreatives Design</h3>
-        <p>Wir verwenden moderne Designprinzipien, um ansprechende und ästhetische Websites zu erstellen.</p>
-      </div>
-      <div class="feature">
-        <i class="fas fa-code"></i>
-        <h3>Saubere Codierung</h3>
-        <p>Unser qualifiziertes Team verwendet beste Praktiken für eine saubere und effiziente Codierung.</p>
-      </div>
-    </div>
-  </section>
-
-  <section id="portfolio">
-    <div class="container">
-      <h2>Unsere Projekte</h2>
-      <div class="portfolio-grid">
-        <div class="portfolio-item">
-          <img src="img/portfolio-1.jpg" alt="Projekt 1">
-          <h4>Projekt 1</h4>
-        </div>
-        <div class="portfolio-item">
-          <img src="img/portfolio-2.jpg" alt="Projekt 2">
-          <h4>Projekt 2</h4>
-        </div>
-        <div class="portfolio-item">
-          <img src="img/portfolio-3.jpg" alt="Projekt 3">
-          <h4>Projekt 3</h4>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <section id="contact">
-    <div class="container">
-      <h2>Kontaktieren Sie uns</h2>
-      <form action="#" method="POST">
-        <input type="text" name="name" placeholder="Name" required>
-        <input type="email" name="email" placeholder="E-Mail" required>
-        <textarea name="message" placeholder="Nachricht" required></textarea>
-        <button type="submit" class="btn">Senden</button>
-      </form>
-    </div>
-  </section>
-
-  <footer>
-    <div class="container">
-      <p>&copy; 2023 Meine coole Website. Alle Rechte vorbehalten.</p>
-    </div>
-  </footer>
-
-  <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>
-</body>
-</html>
diff --git a/templates/index.html b/templates/index.html
index 1964dab..0bd10f6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,123 +1,35 @@
-<!-- index.html -->
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Echtzeit-Tabelle</title>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  <link rel="stylesheet" href="styles.css">
+  <meta charset="UTF-8">
+  <title>Meine Webseite</title>
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
 </head>
 <body>
-  <div class="container">
-    <h1>Echtzeit-Tabelle</h1>
-    
-    <div id="categories-container">
-      <div class="category">
-        <h2 class="category-name">Kategorie 1</h2>
-        <table class="table" data-category="1">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Alter</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for row in table_data %}
-            <tr>
-              <td contenteditable="true" class="editable">{{ row.name }}</td>
-              <td contenteditable="true" class="editable">{{ row.age }}</td>
-              <td><button onclick="saveChanges(this)" class="button">Speichern</button></td>
-            </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <button onclick="addNewTable()" class="new-table-button">Neue Tabelle</button>
-  </div>
-
-  <script>
-    var socket = io.connect();
-    var tableCounter = 2;
-
-    socket.on('connect', function() {
-      console.log('Verbindung zum Server hergestellt');
-    });
-
-    socket.on('table_update', function(data) {
-      updateTable(data);
-    });
-
-    function addNewTable() {
-      var categoryContainer = document.getElementById('categories-container');
-      var newCategory = document.createElement('div');
-      newCategory.classList.add('category');
-
-      var categoryName = document.createElement('h2');
-      categoryName.classList.add('category-name');
-      categoryName.textContent = 'Kategorie ' + tableCounter;
-      newCategory.appendChild(categoryName);
-
-      var newTable = document.createElement('table');
-      newTable.classList.add('table');
-      newTable.dataset.category = tableCounter;
-
-      var tableHeader = document.createElement('thead');
-      var headerRow = document.createElement('tr');
-      var nameHeader = document.createElement('th');
-      nameHeader.textContent = 'Name';
-      var ageHeader = document.createElement('th');
-      ageHeader.textContent = 'Alter';
-      var buttonHeader = document.createElement('th');
-
-      headerRow.appendChild(nameHeader);
-      headerRow.appendChild(ageHeader);
-      headerRow.appendChild(buttonHeader);
-      tableHeader.appendChild(headerRow);
-
-      var tableBody = document.createElement('tbody');
-      newTable.appendChild(tableHeader);
-      newTable.appendChild(tableBody);
-
-      newCategory.appendChild(newTable);
-      categoryContainer.appendChild(newCategory);
-
-      tableCounter++;
-    }
-
-    function saveChanges(button) {
-      var row = button.parentNode.parentNode;
-      var name = row.cells[0].innerText;
-      var age = row.cells[1].innerText;
-      var id = row.getAttribute('data-id');
-
-      var updatedRow = {
-        id: parseInt(id),
-        name: name,
-        age: parseInt(age)
-      };
-
-      socket.emit('update_row', updatedRow);
-
-      var checkmark = row.querySelector('.checkmark');
-      checkmark.style.display = 'inline';
-
-      setTimeout(function() {
-        checkmark.style.display = 'none';
-      }, 3000);
-    }
-
-    function updateTable(data) {
-      var tableBody = $('#data-table tbody');
-      tableBody.empty();
-
-      for (var i = 0; i < data.length; i++) {
-        var row = '<tr data-id="' + data[i].id + '"><td contenteditable="true">' + data[i].name + '</td><td contenteditable="true">' + data[i].age + '</td><td><button onclick="saveChanges(this)">Speichern</button></td></tr>';
-        tableBody.append(row);
-      }
-    }
-  </script>
+  <header>
+    <nav>
+      <ul>
+        <li><a href="/">Startseite</a></li>
+        <li><a href="/projekte">Projekte</a></li>
+        <li><a href="/neuigkeiten">Neuigkeiten</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <section class="hero">
+    <h1>Willkommen auf meiner Webseite</h1>
+    <p>Dies ist der Inhalt der Startseite.</p>
+  </section>
+
+  <section class="content">
+    <h2>Über Uns</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit mauris vel nisl volutpat, at gravida ex commodo. Suspendisse potenti. Nulla facilisi.</p>
+  </section>
+
+  <footer>
+    <p>&copy; 2023 Meine Webseite. Alle Rechte vorbehalten.</p>
+  </footer>
+
+  <script src="{{ url_for('static', filename='js/script.js') }}"></script>
 </body>
 </html>
diff --git a/templates/neuigkeiten.html b/templates/neuigkeiten.html
new file mode 100644
index 0000000..e69de29
diff --git a/templates/projekte.html b/templates/projekte.html
new file mode 100644
index 0000000..1c14f74
--- /dev/null
+++ b/templates/projekte.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Projekte</title>
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body>
+  <header>
+    <nav>
+      <ul>
+        <li><a href="/">Startseite</a></li>
+        <li><a href="/projekte">Projekte</a></li>
+        <li><a href="/neuigkeiten">Neuigkeiten</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <section class="content">
+    <h2>Projekte</h2>
+    <ul id="projekte-liste">
+      <!-- Hier werden die Projekte dynamisch hinzugefügt -->
+    </ul>
+
+    <form id="projekt-form">
+      <input type="text" id="projekt-name" placeholder="Projektname" required>
+      <button type="submit">Hinzufügen</button>
+    </form>
+  </section>
+
+  <footer>
+    <p>&copy; 2023 Meine Webseite. Alle Rechte vorbehalten.</p>
+  </footer>
+
+  <script src="{{ url_for('static', filename='js/projekte.js') }}"></script>
+</body>
+</html>