diff --git a/data.php b/data.php
new file mode 100644
index 0000000..c57f757
--- /dev/null
+++ b/data.php
@@ -0,0 +1,15 @@
+<?php
+    require_once __DIR__ . '/includes/db_connect.php';
+
+    header('Content-Type: application/json');
+
+	$stmt = $pdo->query("SELECT kk.id,
+								vorderseite,
+								rueckseite,
+								farbe,
+								name
+							FROM karteikarte kk
+							JOIN kategorie k ON k.id = kk.kategorie_id;");
+	$karteikarten = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+	echo json_encode($karteikarten);
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..d19311a
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.php b/index.php
index 2d8acbe..5700a7f 100644
--- a/index.php
+++ b/index.php
@@ -2,9 +2,11 @@
     require_once __DIR__ . '/includes/db_connect.php';
 	$system = getenv('POSTGRES_SYSTEM') ?? 'test';
 
-	$stmt = $pdo->query("SELECT vorderseite
+	$stmt = $pdo -> query("SELECT COUNT(*) AS gesamtanzahl
 							FROM karteikarte;");
-	$karteikarten = $stmt->fetchAll(PDO::FETCH_ASSOC);
+	$row = $stmt->fetch(PDO::FETCH_ASSOC);
+
+	$gesamtanzahl = $row ? $row['gesamtanzahl'] : 0;
 ?>
 <!DOCTYPE html>
 <html>
@@ -13,8 +15,78 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-	<?php foreach ($karteikarten as $y): ?>
-		<p>Vorderseite: <?= $y['vorderseite'] ?></p>
-	<?php endforeach; ?>
+	<div class="header">
+		<h2 class="seitentitel">pyolingo</h2>
+		<h2 id="wortZaehler"><?= $gesamtanzahl ?></h2>
+	</div>
+	<div class="inhalt">
+		<button class="button-ellipsoid" id="start">
+			Leg´ los
+		</button>
+		<button class="button-karteikarte" id="deutsch" />
+		<button class="button-karteikarte" id="italienisch" />
+		<script>
+			let items = [];
+			let index = 0;
+
+			fetch("data.php")
+			.then(r => r.json())
+			.then(data => items = data);
+
+			document.getElementById("start").onclick = function() {
+				if(document.getElementById("start").innerText != "Neustart") {
+					changeBackground()
+					document.getElementById("deutsch").style.display = "inline-block";
+					document.getElementById("start").innerText = "Neustart";
+					showVorderseite();
+				} else {
+					items.sort(() => Math.random() - 0.5);
+					index = 0;
+					changeBackground();
+					showVorderseite();
+					document.getElementById("italienisch").style.display = "none";	
+				}
+			};
+
+			document.getElementById("deutsch").onclick = function() {
+				document.getElementById("italienisch").style.display = "inline-block";
+				document.getElementById("deutsch").classList.add("disabled");
+				showRueckseite();
+				changeBackground()
+			};
+
+			document.getElementById("italienisch").onclick = function() {
+				document.getElementById("italienisch").style.display = "none";
+				document.getElementById("deutsch").classList.remove("disabled");
+				index++;
+				if(index >= items.length) index = 0;
+				showVorderseite();
+				changeBackground()
+			};
+
+			function showVorderseite() {
+				let item = items[index];
+
+				document.getElementById("deutsch").innerText = item.vorderseite;
+				document.getElementById("wortZaehler").innerText = (index + 1) + " / " + items.length;
+			}
+
+			function showRueckseite() {
+				let item = items[index];
+
+				document.getElementById("italienisch").innerText = item.rueckseite;
+			}
+
+			function changeBackground() {
+				let item = items[index];
+
+				if(item.farbe != "default") {
+					document.getElementById("italienisch").style.color = item.farbe;
+				} else {
+					document.getElementById("italienisch").style.color = "black";
+				}
+			}
+		</script>
+	</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 78cbfbe..5a8c661 100644
--- a/style.css
+++ b/style.css
@@ -1,8 +1,95 @@
 html {
-    font-size: 16px;
+    font-size: 26px;
     font-family: Arial, Helvetica, sans-serif;
 }
 
 body {
     background-color: rgb(122, 122, 122);
+    color: #14748A;
+}
+
+h2 {
+    font-size: 2.2rem;
+}
+
+h2.seitentitel {
+    width: 100%;
+    border-style: none;
+    margin-left: 100px;
+}
+
+div.header{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    background-color: rgb(210, 210, 210);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 1000;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+.button-ellipsoid:hover {
+    background: linear-gradient(#169ab7, #14748A);
+}
+
+.button-ellipsoid {
+    font-size: 26px;
+    font-family: Arial, Helvetica, sans-serif;
+    height: 100px;
+    width: 300px;
+    margin-top: 25px;
+    padding: 25px 40px;
+    color: black;
+    background: radial-gradient(ellipse at center, #14748A 0%, #169ab7 70%);
+    border: none;
+    border-radius: 180px / 130px;
+    box-shadow: inset 0 3px 6px rgba(255,255,255,0.4),
+                0 4px 8px rgba(0,0,0,0.3);
+}
+
+.button-karteikarte {
+    display: none;
+    font-size: 96px;
+    font-family: Arial, Helvetica, sans-serif;
+    width: 75%;
+    margin-top: 25px;
+    padding: 25px 40px;
+    color: black;
+    background: rgb(210, 210, 210);;
+    border: none;
+    box-shadow: inset 0 3px 6px rgba(255,255,255,0.4),
+                0 4px 8px rgba(0,0,0,0.3);
+}
+
+#deutsch {
+    height: 250px;
+}
+
+#deutsch.disabled {
+    pointer-events: none;
+    opacity: 1;
+}
+
+#italienisch {
+    height: 750px;
+}
+
+div.inhalt {
+    margin-top: 150px;
+    height: calc(100vh - 80px);
+    display: flex;
+    flex-direction:column;
+    align-items: center;
+}
+
+#wortZaehler {
+    width: 300px;
+    margin-right: 100px;
+    text-align: right;
+    margin-left: 0px;
 }
\ No newline at end of file
