diff --git a/forms/hinzufuegenKarte.php b/forms/hinzufuegenKarte.php
index 254f147..251ab01 100644
--- a/forms/hinzufuegenKarte.php
+++ b/forms/hinzufuegenKarte.php
@@ -80,6 +80,8 @@
                                     FROM farbe;");
             $farbe_array = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
+            foreach($farbe_array as $farbe) if($farbe['farbe'] == 'red') $red_farbe_id = $farbe['id'];
+
             $stmt = $pdo->prepare("INSERT INTO deutsch(wort, kategorie_id, wort_hinzugefuegt)
                                     VALUES (:wort, :kategorie_id, (:wort_hinzugefuegt)::timestamp);");
             $stmt->execute(['wort' => $deutsch,
@@ -112,20 +114,23 @@
                 for($i = 0; $i < 7; $i++) {
                     $pp = ($i == 0) ? null : $personalpronomen[$i - 1]['id'];
 
+                    $stmt = $pdo->prepare("INSERT INTO italienisch (wort, deutsch_id, personalpronomen_id, suffix, endung, farbe_id)
+                                            VALUES (:wort, :deutsch_id, :personalpronomen_id, :suffix, :endung, :farbe_id)");
+
                     if(count($endung) == 0) {
-                        $stmt = $pdo->prepare("INSERT INTO italienisch (wort, deutsch_id, personalpronomen_id, suffix)
-                                                VALUES (:wortstamm, :deutsch_id, :personalpronomen_id, :suffix)");
-                        $stmt->execute(['wortstamm' => $wortstamm[$i],
+                        $stmt->execute(['wort' => $wortstamm[$i],
                                         'deutsch_id' => $deutsch_id,
                                         'personalpronomen_id' => $pp,
-                                        'suffix' => $suffix]);
+                                        'suffix' => $suffix,
+                                        'endung' => null,
+                                        'farbe_id' => null]);
                     } else {
-                        $stmt = $pdo->prepare("INSERT INTO italienisch (wort, deutsch_id, personalpronomen_id, suffix, wortstamm)
-                                                VALUES (:wort, :deutsch_id, :personalpronomen_id, :suffix, :wortstamm)");
-                        $stmt->execute(['wortstamm' => $endung[$i],
+                        $stmt->execute(['wort' => $wortstamm[$i],
                                         'deutsch_id' => $deutsch_id,
                                         'personalpronomen_id' => $pp,
-                                        'suffix' => $suffix]);                        
+                                        'suffix' => $suffix,
+                                        'endung' => $endung[$i],
+                                        'farbe_id' => $red_farbe_id]);
                     }
                 }
             }
diff --git a/index.php b/index.php
index 12bbfb6..826aec8 100644
--- a/index.php
+++ b/index.php
@@ -104,6 +104,14 @@
 				</tr>
 			</table>
 		</button>
+	<div class="menue" id="kartenNavigation">
+		<button class="button-ellipsoid" id="button_kartenNavigationVorh">
+			<< vorheriges Wort
+		</button>
+		<button class="button-ellipsoid" id="button_kartenNavigationNaech">
+			nächstes Wort >>
+		</button>
+	</div>
 		<script>
 			let items = [];
 			let index = 0;
@@ -112,15 +120,12 @@
 			.then(r => r.json())
 			.then(data => items = data);
 
-			//items.sort(() => Math.random() - 0.5);
-
 			document.getElementById("start").onclick = function() {
 				if(document.getElementById("start").innerText != "Neustart") {
 					document.getElementById("deutsch").style.display = "inline-block";
 					document.getElementById("start").innerText = "Neustart";
 					showVorderseite();
 				} else {
-					//items.sort(() => Math.random() - 0.5);
 					index = 0;
 					showVorderseite();
 					document.getElementById("italienisch").style.display = "none";
@@ -130,6 +135,36 @@
 			};
 
 			document.getElementById("deutsch").onclick = function() {
+				buttonDeutsch();
+			}
+
+			document.getElementById("italienisch").onclick = function() {
+				buttonItalienisch();
+			}
+
+			document.getElementById("italienisch_verben").onclick = function() {
+				buttonItalienischVerben();
+			}	
+
+			document.getElementById("button_kartenNavigationVorh").onclick = function() {
+				index > 0 ? index -= 1 : index = items.length - 1;
+				buttonDeutsch();
+				showVorderseite();
+				document.getElementById("italienisch").style.display = "none";
+				document.getElementById("italienisch_verben").style.display = "none";
+				document.getElementById("deutsch").classList.remove("disabled");
+			}
+
+			document.getElementById("button_kartenNavigationNaech").onclick = function() {
+				index == items.length -1 ? index = 0 : index += 1;
+				buttonDeutsch();
+				showVorderseite();
+				document.getElementById("italienisch").style.display = "none";
+				document.getElementById("italienisch_verben").style.display = "none";
+				document.getElementById("deutsch").classList.remove("disabled");
+			}
+
+			function buttonDeutsch() {
 				document.getElementById("deutsch").classList.add("disabled");
 				if(items[index].wortart != "Verben") {
 					document.getElementById("italienisch").style.display = "flex";
@@ -139,7 +174,7 @@
 				showRueckseite();
 			};
 
-			document.getElementById("italienisch").onclick = function() {
+			function buttonItalienisch() {
 				document.getElementById("italienisch").style.display = "none";
 				document.getElementById("deutsch").classList.remove("disabled");
 				index++;
@@ -147,14 +182,14 @@
 				showVorderseite();
 			};
 
-			document.getElementById("italienisch_verben").onclick = function() {
+			function buttonItalienischVerben() {
 				document.getElementById("italienisch_verben").style.display = "none";
 				document.getElementById("deutsch").classList.remove("disabled");
 				index++;
 				if(index >= items.length) index = 0;
 				showVorderseite();
 			};
-
+			
 			function showVorderseite() {
 				resetWords();
 				let item = items[index];
@@ -261,7 +296,7 @@
 	</div>
 	<div class="menue">
 		<a href="neueKarte.php" class="menueLink">
-            < + neue Karte >
+            < neue Karte >
         </a>
 		<a href="neueKarte.php" class="menueLink">
             < Kartenansicht >
diff --git a/style.css b/style.css
index 17b5e6f..42524a3 100644
--- a/style.css
+++ b/style.css
@@ -83,6 +83,20 @@ div.header{
     height: 250px;
 }
 
+#button_kartenNavigationVorh {
+    height: 75px;
+    width: 450px;
+    margin-top: 0;
+    padding: 0;
+}
+
+#button_kartenNavigationNaech {
+    height: 75px;
+    width: 450px;
+    margin-top: 0;
+    padding: 0;
+}
+
 #deutsch.disabled {
     pointer-events: none;
     opacity: 1;
@@ -180,6 +194,12 @@ a:visited {
     margin-left: 30px;
 }
 
+#input_suffix {
+    display: inline-block;
+    width: 700px;
+    margin-left: 60px;
+}
+
 .hinzufuegenKarteElemente {
     display: flex;
     justify-content: space-between;    
@@ -246,7 +266,7 @@ a:visited {
 }
 
 #input_wortstamm {
-    width: 230px;
+    width: 500px;
 }
 
 #input_endung {
@@ -254,6 +274,7 @@ a:visited {
     width: 130px;
 }
 
-#input_suffix {
-    width: 230px;
+#kartenNavigation {
+    bottom: 200px;
+    background-color: rgb(122, 122, 122);
 }
\ No newline at end of file
diff --git a/verben.php b/verben.php
index 5525931..2cca9cb 100644
--- a/verben.php
+++ b/verben.php
@@ -38,7 +38,7 @@
             <div>
                 <p class="kategorie" id="p_deutsch">Suffix:</p>
                 <input class="kategorie"
-                        id="input_deutsch"
+                        id="input_suffix"
                         type="text"
                         name="suffix"
                         value="<?= htmlspecialchars($old['suffix'] ?? '') ?>"
@@ -49,14 +49,13 @@
                     <th></th>
                     <th>Wortstamm</th>
                     <th>Endung</th>
-                    <!--th>Suffix</th-->
                 </tr>
                 <?php for($i = 0; $i < 7; $i++) { ?>
                 <tr>
                     <td>
                         <input id="hiddenInputEditTyp" type="hidden" name="farbe_<?= $i ?>" value="red">
                         <p class="kategorie" id="p_italienisch">
-                            <?php switch($i){
+                            <?php switch($i) {
                                 case(0): echo 'Grundwort:'; break;
                                 case(1): echo 'io:'; break;
                                 case(2): echo 'tu:'; break;
@@ -83,13 +82,6 @@
                                 name="endung_<?= $i ?>"
                                 value="<?= htmlspecialchars(($old['endung_' . $i] ?? '')) ?>">
                     </td>
-                            <!--td>
-                            <input class="kategorie"
-                                    id="input_suffix"
-                                    type="text"
-                                    name="suffix_< ?= $i ?>"
-                                    value="< ?= htmlspecialchars(($old['suffix_' . $i] ?? '')) ?>">
-                            </td-->
                 </tr>
                 <?php }; ?>
             </table>