diff --git a/static/css/style.css b/static/css/style.css
index 7f96b5d..340d01a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -88,6 +88,11 @@ body {
     max-width: 900px;
 }
 
+.highlight-newline {
+    color: #888;
+    font-weight: bold;
+}
+
 @media (max-width: 768px) {
     .container {
         padding: 0 10px;
diff --git a/static/js/script.js b/static/js/script.js
index d9257c3..faa08f1 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -154,27 +154,41 @@ document.addEventListener('DOMContentLoaded', function() {
         const originalText = currentText;
         
         for (let i = 0; i < originalText.length; i++) {
+            const currentChar = originalText[i];
             if (i < userInput.length) {
-                if (userInput[i] === originalText[i]) {
-                    // Für korrekt getippte Leerzeichen und Tabulatoren: sichtbar machen
-                    if (originalText[i] === ' ') {
+                if (userInput[i] === currentChar) {
+                    // Für korrekt getippte Zeichen
+                    if (currentChar === ' ') {
                         highlightedText += '<span class="highlight-correct highlight-space">·</span>';
-                    } else if (originalText[i] === '\t') {
+                    } else if (currentChar === '\t') {
                         highlightedText += '<span class="highlight-correct highlight-tab">→</span>';
+                    } else if (currentChar === '\n') {
+                        highlightedText += '<span class="highlight-correct highlight-newline">↵</span>';
                     } else {
-                        highlightedText += `<span class="highlight-correct">${originalText[i]}</span>`;
+                        highlightedText += `<span class="highlight-correct">${currentChar}</span>`;
                     }
                 } else {
-                    highlightedText += `<span class="highlight-incorrect">${originalText[i]}</span>`;
+                    // Für falsch getippte Zeichen
+                    if (currentChar === ' ') {
+                        highlightedText += '<span class="highlight-incorrect highlight-space">·</span>';
+                    } else if (currentChar === '\t') {
+                        highlightedText += '<span class="highlight-incorrect highlight-tab">→</span>';
+                    } else if (currentChar === '\n') {
+                        highlightedText += '<span class="highlight-incorrect highlight-newline">↵</span>';
+                    } else {
+                        highlightedText += `<span class="highlight-incorrect">${currentChar}</span>`;
+                    }
                 }
             } else {
-                // Für nicht eingegebene Zeichen: Einrückungen anzeigen
-                if (originalText[i] === ' ') {
+                // Für nicht eingegebene Zeichen
+                if (currentChar === ' ') {
                     highlightedText += '<span class="highlight-space">·</span>';
-                } else if (originalText[i] === '\t') {
+                } else if (currentChar === '\t') {
                     highlightedText += '<span class="highlight-tab">→</span>';
+                } else if (currentChar === '\n') {
+                    highlightedText += '<span class="highlight-newline">↵</span>';
                 } else {
-                    highlightedText += originalText[i];
+                    highlightedText += currentChar;
                 }
             }
         }
diff --git a/templates/index.html b/templates/index.html
index b95e52f..a74fa9a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -97,10 +97,10 @@
                             <h5 class="card-title">Lektionen</h5>
                             <div class="row">
                                 {% for lesson in lessons %}
-                                <div class="col-md-3 mb-2">
-                                    <button class="btn btn-outline-primary w-100 lesson-btn" 
+                                <div class="col-md-2 col-3 mb-2">
+                                    <button class="btn btn-outline-primary btn-sm w-100 lesson-btn" 
                                             data-lesson-index="{{ loop.index0 }}">
-                                        {{ lesson.get('description', 'Lektion ' ~ (loop.index0 + 1)) }}
+                                        {{ lesson.get('description', '# ' ~ (loop.index0 + 1)) }}
                                     </button>
                                 </div>
                                 {% endfor %}