diff --git a/frontend/assets/Labels/Anleitung.png b/frontend/assets/Labels/Anleitung.png
new file mode 100644
index 0000000..72ca1a7
Binary files /dev/null and b/frontend/assets/Labels/Anleitung.png differ
diff --git a/frontend/introduction/index.html b/frontend/introduction/index.html
new file mode 100644
index 0000000..fbc5355
--- /dev/null
+++ b/frontend/introduction/index.html
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+ Anleitung
+
+
+
+
+
+
+
+
+
+
+
+
+
Spielanleitung
+
+
Registrierung & Anmeldung:
+
+
Registriere dich für ein neues Konto oder melde dich mit deinen bestehenden Daten an, um loszulegen.
+
Um zu starten ist es nur wichtig einen Username und ein Passwort anzugeben
+
+
+
Lobby erstellen oder beitreten:
+
+
Navigiere zum Dashboard und wähle "Lobby".
+
Du kannst eine neue Lobby erstellen. Ein einzigartiger Code wird generiert, den du mit einem Freund teilen kannst.
+
Alternativ kannst du einer bestehenden Lobby beitreten, indem du den Code deines Freundes eingibst.
+
+
+
Spielstart:
+
+
Sobald zwei Spieler erfolgreich der Lobby beigetreten sind, startet das Spiel automatisch nach einem 5 Sekunden Countdown.
+
Danach werdet ihr auf die Spielseite geleitet, wo ihr nochmal 5 Sekunden warten müsst, damit alle auf die Seite weitgeleitet wurden.
+
+
+
Spielablauf & Steuerung:
+
+
Jeder Spieler steuert eine Schlange. Welche Farbe man hat kann man an der rechten Infobox entnehmen.
+
Benutze die Tasten W (hoch), A (links), S (runter), D (rechts) oder die Pfeiltasten, um deine Schlange zu steuern.
+
Sammelt gemeinsam Früchte (Äpfel und Blaubeeren), um Punkte zu erzielen und eure Schlangen wachsen zu lassen. Jede gefressene Frucht erhöht den gemeinsamen Punktestand.
+
Welche Schlange welche Frucht dabei sammelt ist egal.
+
Ziel ist es, so viele Punkte wie möglich zu sammeln, ohne mit den Wänden, der eigenen Schlange oder der Schlange des Partners zu kollidieren.
+
+
+
Spielende:
+
+
Das Spiel endet, wenn eine der Schlangen kollidiert.
+
Euer erreichter Punktestand wird angezeigt und gegebenenfalls in der Bestenliste gespeichert.
+
Ihr habt nach Spielende 5 Sekunden Zeit, direkt eine neue Runde zu starten, sofern beide Spieler noch im Spiel sind.
+
Sollte nur einer der Spieler erneut starten, wird das neue Spiel nach 5 Sekunden beendet.
+
+
+
Tipps:
+
+
Kommunikation ist der Schlüssel! Sprecht euch ab, um Kollisionen zu vermeiden und effizient Früchte zu sammeln.
+
Versucht, euch nicht gegenseitig den Weg abzuschneiden.
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/introduction/style.css b/frontend/introduction/style.css
new file mode 100644
index 0000000..8d3bed8
--- /dev/null
+++ b/frontend/introduction/style.css
@@ -0,0 +1,63 @@
+.buttonMenu{
+ height: 65vh;
+}
+
+#introWrapper{
+ border: 3px solid rgba(255, 255, 255, 0.6);
+ border-radius: 15px;
+
+ max-height: 50vh;
+ overflow: auto;
+
+ background-color: rgb(63, 63, 63, 0.5);
+
+ padding: 15px;
+}
+
+.anleitung-text-content h1 {
+ text-align: center;
+ color: #ffffff;
+ margin-bottom: 25px;
+ font-size: 2.2em;
+}
+
+.anleitung-text-content h2 {
+ color: #487fc0;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-size: 1.6em;
+ border-bottom: 1px solid #487fc0;
+ padding-bottom: 3px;
+}
+
+.anleitung-text-content ul {
+ list-style-type: disc;
+ margin-left: 25px;
+ margin-bottom: 15px;
+ padding-left: 0; /* Entferne Standard-Padding von ul */
+}
+
+.anleitung-text-content li {
+ margin-bottom: 6px;
+ line-height: 1.5;
+}
+
+.anleitung-text-content strong {
+ color: #FFA500; /* Orange für hervorgehobene Tasten */
+}
+
+.anleitung-bild {
+ max-width: 100%; /* Stellt sicher, dass Bilder nicht über den Container hinausragen */
+ height: auto; /* Behält das Seitenverhältnis bei */
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ border-radius: 8px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ display: block; /* Macht das Bild zu einem Blockelement für einfacheres Zentrieren/Margin */
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.small-bild {
+ max-width: 60%; /* Kleinere Bilder, z.B. für UI-Ausschnitte */
+}
\ No newline at end of file
diff --git a/frontend/scripts/ButtonManager.js b/frontend/scripts/ButtonManager.js
index 7500fe8..7513607 100644
--- a/frontend/scripts/ButtonManager.js
+++ b/frontend/scripts/ButtonManager.js
@@ -8,7 +8,7 @@ class ButtonManager {
{ id: "lobbyBtn", route: "/dashboard/lobby" },
{ id: "accountBtn", route: "/dashboard/account" },
{ id: "logoutBtn", route: "/api/account/logout" },
- { id: "tutorialBtn", route: "https://www.youtube.com/watch?v=1fkV5rB13jQ" },
+ { id: "tutorialBtn", route: "/introduction" },
{ id: "highScoreBtn", route: "/highscores"}
];
+