diff --git a/README.md b/README.md
index 8559d8f..0c72ebf 100644
--- a/README.md
+++ b/README.md
@@ -233,4 +233,4 @@ Das Projekt basiert auf bewährten Web-Standards:
 *   **Features:**
     *   **Notizen:** Neue Funktion "Notizen" hinzugefügt inkl. Rich-Text-Editor.
     *   **Haushaltsfreigabe:** Notizen können mit dem Haushalt geteilt werden.
-    *   **Design-Update:** Die Notizen-Übersichtsseite nutzt nun eine Split-View (Liste links, Inhalt rechts).
+    *   **Design-Update:** Die Notizen-Übersichtsseite wurde an das Design der ToDo-Listen angepasst (Split-View, List-Groups, weiße Notizhintergründe). Der Texteditor bietet nun deutsche Tooltips. Beim Speichern einer Notiz wird nun besser zurück in die Übersicht navigiert.
diff --git a/src/add_note.php b/src/add_note.php
index 0ccfa2b..c09db95 100644
--- a/src/add_note.php
+++ b/src/add_note.php
@@ -27,7 +27,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         $stmt->bind_param("iissi", $current_user_id, $current_user_household_id, $title, $content, $is_shared);
         if ($stmt->execute()) {
             $new_id = $stmt->insert_id;
-            header("Location: edit_note.php?id=$new_id&success=1");
+            header("Location: notes.php?id=$new_id");
             exit;
         } else {
             $error = "Fehler beim Speichern der Notiz.";
@@ -113,6 +113,19 @@ require_once 'header.php';
         }
     });
 
+    // Tooltips hinzufügen
+    const tooltips = {
+        'bold': 'Fett', 'italic': 'Kursiv', 'underline': 'Unterstrichen', 'strike': 'Durchgestrichen',
+        'header': 'Überschrift', 'size': 'Schriftgröße', 'color': 'Textfarbe', 'background': 'Hintergrundfarbe',
+        'list': 'Liste', 'align': 'Ausrichtung', 'link': 'Link einfügen', 'clean': 'Formatierung entfernen'
+    };
+    for (let key in tooltips) {
+        document.querySelectorAll('.ql-' + key).forEach(el => el.setAttribute('title', tooltips[key]));
+    }
+    // Spezielle Listen (ordered/bullet)
+    document.querySelectorAll('.ql-list[value="ordered"]').forEach(el => el.setAttribute('title', 'Nummerierte Liste'));
+    document.querySelectorAll('.ql-list[value="bullet"]').forEach(el => el.setAttribute('title', 'Aufzählungsliste'));
+
     var form = document.getElementById('noteForm');
     form.onsubmit = function() {
         var content = document.getElementById('hiddenContent');
diff --git a/src/edit_note.php b/src/edit_note.php
index 7fa098a..84999a1 100644
--- a/src/edit_note.php
+++ b/src/edit_note.php
@@ -108,9 +108,11 @@ require_once 'header.php';
             <?php endif; ?>
             
             <?php if ($success): ?>
-                <div class="alert alert-success alert-dismissible fade show">
-                    <i class="fas fa-check-circle me-2"></i><?php echo htmlspecialchars($success); ?>
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                <div class="alert alert-success d-flex justify-content-between align-items-center">
+                    <div>
+                        <i class="fas fa-check-circle me-2"></i><?php echo htmlspecialchars($success); ?>
+                    </div>
+                    <a href="notes.php?id=<?php echo $note['id']; ?>" class="btn btn-sm btn-success">Zurück zur Übersicht</a>
                 </div>
             <?php endif; ?>
 
@@ -200,6 +202,19 @@ require_once 'header.php';
         }
     });
 
+    // Tooltips hinzufügen
+    const tooltips = {
+        'bold': 'Fett', 'italic': 'Kursiv', 'underline': 'Unterstrichen', 'strike': 'Durchgestrichen',
+        'header': 'Überschrift', 'size': 'Schriftgröße', 'color': 'Textfarbe', 'background': 'Hintergrundfarbe',
+        'list': 'Liste', 'align': 'Ausrichtung', 'link': 'Link einfügen', 'clean': 'Formatierung entfernen'
+    };
+    for (let key in tooltips) {
+        document.querySelectorAll('.ql-' + key).forEach(el => el.setAttribute('title', tooltips[key]));
+    }
+    // Spezielle Listen (ordered/bullet)
+    document.querySelectorAll('.ql-list[value="ordered"]').forEach(el => el.setAttribute('title', 'Nummerierte Liste'));
+    document.querySelectorAll('.ql-list[value="bullet"]').forEach(el => el.setAttribute('title', 'Aufzählungsliste'));
+
     var form = document.getElementById('noteForm');
     form.onsubmit = function() {
         var content = document.getElementById('hiddenContent');
diff --git a/src/notes.php b/src/notes.php
index 217ea7b..80585f5 100644
--- a/src/notes.php
+++ b/src/notes.php
@@ -34,7 +34,7 @@ $stmt->close();
 
 // Check if a specific note is selected
 $active_note = null;
-$active_note_id = isset($_GET['id']) ? intval($_GET['id']) : null;
+$active_note_id = isset($_GET['id']) ? intval($_GET['id']) : (!empty($notes) ? $notes[0]['id'] : 0);
 
 if ($active_note_id) {
     foreach ($notes as $note) {
@@ -46,7 +46,6 @@ if ($active_note_id) {
 }
 ?>
 
-<!-- Quill Theme for rendering content -->
 <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
 <style>
     /* Anpassungen für die Anzeige ohne Editor-Rahmen */
@@ -57,121 +56,90 @@ if ($active_note_id) {
         font-size: 1rem;
         min-height: auto;
     }
-    .note-list-row {
-        cursor: pointer;
-        transition: background-color 0.2s;
-    }
-    .note-list-row:hover {
-        background-color: #f8f9fa;
-    }
-    .note-list-row.active {
-        background-color: #e9ecef;
-        border-left: 4px solid #0d6efd;
-    }
 </style>
 
-<div class="container-fluid py-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <h2 class="mb-0"><i class="fas fa-sticky-note text-warning me-2"></i>Notizen</h2>
-        <a href="add_note.php" class="btn btn-primary shadow-sm"><i class="fas fa-plus me-2"></i>Neue Notiz</a>
+<div class="card mb-4">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h2 class="h4 mb-0"><i class="fas fa-sticky-note me-2"></i>Notizen</h2>
+        <a href="add_note.php" class="btn btn-primary btn-sm shadow-sm"><i class="fas fa-plus me-2"></i>Neue Notiz</a>
     </div>
-
-    <div class="row">
-        <!-- Linke Seite: Liste -->
-        <div class="col-lg-5 mb-4">
-            <div class="card shadow-sm border-0 h-100">
-                <div class="card-body p-0">
-                    <div class="table-responsive">
-                        <table class="table align-middle mb-0">
-                            <thead class="table-light">
-                                <tr>
-                                    <th>Titel & Status</th>
-                                    <th class="text-end">Aktionen</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <?php if (empty($notes)): ?>
-                                    <tr>
-                                        <td colspan="2" class="text-center py-4 text-muted">Keine Notizen vorhanden.</td>
-                                    </tr>
-                                <?php else: ?>
-                                    <?php foreach ($notes as $note): ?>
-                                        <?php $is_active = ($active_note && $active_note['id'] == $note['id']); ?>
-                                        <tr class="note-list-row <?php echo $is_active ? 'active' : ''; ?>" onclick="window.location='notes.php?id=<?php echo $note['id']; ?>'">
-                                            <td class="py-3">
-                                                <div class="fw-bold text-dark mb-1">
-                                                    <?php echo htmlspecialchars($note['title']); ?>
-                                                </div>
-                                                <div class="small">
-                                                    <?php if ($note['user_id'] == $current_user_id): ?>
-                                                        <span class="badge bg-secondary me-1">Ich</span>
-                                                    <?php else: ?>
-                                                        <span class="text-muted me-1"><i class="fas fa-user fa-xs"></i> <?php echo htmlspecialchars($note['owner_name']); ?></span>
-                                                    <?php endif; ?>
-                                                    
-                                                    <?php if ($note['is_shared']): ?>
-                                                        <span class="badge bg-success" title="Geteilt"><i class="fas fa-share-alt"></i></span>
-                                                    <?php endif; ?>
-                                                </div>
-                                            </td>
-                                            <td class="text-end" onclick="event.stopPropagation();">
-                                                <a href="edit_note.php?id=<?php echo $note['id']; ?>" class="btn btn-sm btn-outline-primary" title="Bearbeiten">
-                                                    <i class="fas fa-edit"></i>
-                                                </a>
-                                                <?php if ($note['user_id'] == $current_user_id): ?>
-                                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete(<?php echo $note['id']; ?>)" title="Löschen">
-                                                        <i class="fas fa-trash"></i>
-                                                    </button>
-                                                <?php endif; ?>
-                                            </td>
-                                        </tr>
-                                    <?php endforeach; ?>
-                                <?php endif; ?>
-                            </tbody>
-                        </table>
+    <div class="card-body p-4">
+        
+        <div class="row">
+            <!-- Linke Seite: Liste -->
+            <div class="col-md-4 mb-4 mb-md-0">
+                <div class="card h-100 bg-light border-0">
+                    <div class="card-body p-3">
+                        <h5 class="mb-3"><i class="fas fa-list me-2"></i>Meine Notizen</h5>
+                        <div class="list-group mb-3 shadow-sm">
+                            <?php foreach ($notes as $note): ?>
+                                <?php $is_active = ($active_note && $active_note['id'] == $note['id']); ?>
+                                <a href="notes.php?id=<?php echo $note['id']; ?>" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center <?php echo $is_active ? 'bg-success text-white fw-bold' : ''; ?>">
+                                    <div class="text-truncate" style="max-width: 80%;">
+                                        <?php echo htmlspecialchars($note['title']); ?>
+                                        <div class="small <?php echo $is_active ? 'text-white-50' : 'text-muted'; ?> fw-normal mt-1">
+                                            <?php if ($note['user_id'] != $current_user_id): ?>
+                                                <i class="fas fa-user fa-xs me-1"></i><?php echo htmlspecialchars($note['owner_name']); ?>
+                                            <?php endif; ?>
+                                            <?php if ($note['is_shared']): ?>
+                                                <i class="fas fa-share-alt fa-xs ms-1" title="Geteilt"></i>
+                                            <?php endif; ?>
+                                        </div>
+                                    </div>
+                                    <div onclick="event.stopPropagation();">
+                                        <?php if ($note['user_id'] == $current_user_id): ?>
+                                            <button type="button" class="btn btn-sm btn-link <?php echo $is_active ? 'text-white' : 'text-danger'; ?> p-0 ms-2" onclick="confirmDelete(<?php echo $note['id']; ?>, event)" title="Löschen">
+                                                <i class="fas fa-trash"></i>
+                                            </button>
+                                        <?php endif; ?>
+                                    </div>
+                                </a>
+                            <?php endforeach; ?>
+                            <?php if (empty($notes)): ?>
+                                <div class="list-group-item text-muted">Keine Notizen vorhanden.</div>
+                            <?php endif; ?>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Rechte Seite: Inhalt -->
-        <div class="col-lg-7 mb-4">
-            <?php if ($active_note): ?>
-                <div class="card shadow-sm border-0 h-100">
-                    <div class="card-body p-4">
-                        <div class="d-flex justify-content-between align-items-start mb-3 border-bottom pb-3">
-                            <h3 class="mb-0 fw-bold"><?php echo htmlspecialchars($active_note['title']); ?></h3>
-                            <div class="text-end text-muted small">
+            <!-- Rechte Seite: Inhalt -->
+            <div class="col-md-8">
+                <?php if ($active_note): ?>
+                    <div class="card h-100 border-0 shadow-sm bg-white">
+                        <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
+                            <h5 class="mb-0 py-2">
+                                <i class="fas fa-align-left me-2 text-muted"></i><?php echo htmlspecialchars($active_note['title']); ?>
+                            </h5>
+                            <div>
+                                <a href="edit_note.php?id=<?php echo $active_note['id']; ?>" class="btn btn-sm btn-outline-primary" title="Bearbeiten">
+                                    <i class="fas fa-edit"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="card-body p-4">
+                            <div class="text-end text-muted small mb-4 border-bottom pb-2">
                                 <div>Zuletzt geändert: <?php echo date('d.m.Y H:i', strtotime($active_note['updated_at'])); ?></div>
                                 <?php if ($active_note['is_shared']): ?>
                                     <div><i class="fas fa-share-alt text-success me-1"></i>Mit Haushalt geteilt</div>
                                 <?php endif; ?>
                             </div>
-                        </div>
-                        <div class="ql-snow">
-                            <div class="ql-editor render-only">
-                                <?php echo $active_note['content']; ?>
+                            <div class="ql-snow">
+                                <div class="ql-editor render-only">
+                                    <?php echo $active_note['content']; ?>
+                                </div>
                             </div>
                         </div>
-                        <div class="mt-4 pt-3 border-top text-end">
-                            <a href="edit_note.php?id=<?php echo $active_note['id']; ?>" class="btn btn-primary">
-                                <i class="fas fa-edit me-2"></i>Diese Notiz bearbeiten
-                            </a>
+                    </div>
+                <?php else: ?>
+                    <div class="alert alert-secondary d-flex align-items-center h-100 m-0">
+                        <div>
+                            <h5 class="alert-heading">Keine Notiz ausgewählt</h5>
+                            <p class="mb-0">Wähle links eine Notiz aus oder erstelle eine neue, um sie hier zu lesen.</p>
                         </div>
                     </div>
-                </div>
-            <?php else: ?>
-                <div class="card shadow-sm border-0 h-100 bg-light d-flex align-items-center justify-content-center" style="min-height: 400px;">
-                    <div class="text-center text-muted p-5">
-                        <i class="fas fa-sticky-note fa-4x mb-3 text-secondary opacity-50"></i>
-                        <h4>Keine Notiz ausgewählt</h4>
-                        <p>Wähle links eine Notiz aus der Liste, um ihren Inhalt hier zu lesen.</p>
-                        <a href="add_note.php" class="btn btn-outline-primary mt-2">
-                            <i class="fas fa-plus me-2"></i>Jetzt eine Notiz erstellen
-                        </a>
-                    </div>
-                </div>
-            <?php endif; ?>
+                <?php endif; ?>
+            </div>
         </div>
     </div>
 </div>
@@ -199,7 +167,11 @@ if ($active_note_id) {
 </div>
 
 <script>
-function confirmDelete(id) {
+function confirmDelete(id, event) {
+    if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
     document.getElementById('deleteNoteId').value = id;
     var myModal = new bootstrap.Modal(document.getElementById('deleteNoteModal'));
     myModal.show();