diff --git a/src/App.scss b/src/App.scss
index f529540..4f52109 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -34,21 +34,25 @@ h1 {
     font-size: 1em;
   }
 
+  textarea {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 15px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    font-size: 1em;
+    font-family: Arial, sans-serif;
+
+    &.single-row {
+      white-space: nowrap;
+    }
+  }
+
   .textarea-container {
     position: relative;
     width: 100%;
 
-    textarea {
-      width: 100%;
-      box-sizing: border-box;
-      padding: 15px;
-      margin-bottom: 10px;
-      border: 1px solid #ddd;
-      border-radius: 10px;
-      font-size: 1em;
-      font-family: Arial, sans-serif;
-    }
-
     .char-count-container {
       position: absolute;
       bottom: 8px;
diff --git a/src/components/NewPostForm.js b/src/components/NewPostForm.js
index 3470ae2..6287095 100644
--- a/src/components/NewPostForm.js
+++ b/src/components/NewPostForm.js
@@ -6,23 +6,26 @@ const NewPostForm = ({ addPost }) => {
 
     const handleSubmit = (e) => {
         e.preventDefault();
-        if (text.trim()) {
-            addPost(text);
+        if (text.trim() && title.trim()) {
+            addPost(title, text);
             setText('');
+            setTitle('');
         }
     };
 
     return (
         <form className="new-post-form" onSubmit={handleSubmit}>
-            <input
-                type="text"
+            <textarea
+                className="single-row"
+                rows={1}
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 placeholder="Titel"
+                maxLength={50}
             />
             <div className="textarea-container">
                 <textarea
-                    rows={5}
+                    rows={15}
                     value={text}
                     onChange={(e) => setText(e.target.value)}
                     placeholder="Schreibe einen neuen Jodel..."