diff --git a/public/admin.html b/public/admin.html
new file mode 100644
index 0000000..a161c63
--- /dev/null
+++ b/public/admin.html
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/admin.css">
+    <link rel="icon" type="image/png" href="img/Viper-plex-logo.png">
+    <title>Admin-Bereich</title>
+</head>
+<body>
+     <!-- Logo separat einfügen -->
+     <div class="logo-container">
+        <a href="index.html">
+            <img src="img/Viper-plex-logo.png" alt="Viper-Plex Logo" class="logo">
+        </a>
+    </div>
+    
+    <div class="welcome-box">
+        <h1>Willkommen bei Viper-Plex</h1>
+        <nav class="navbar">
+            <div class="navbar-container">
+                <a href="index.html" class="navbar-link">Home</a>
+                <a href="wunsch.html" class="navbar-link">Film & Serien Wunsch</a>
+                <a href="anleitung.html" class="navbar-link">Anleitung</a>
+                <a href="funktionen.html" class="navbar-link">Funktionen</a>
+                <a href="faq.html" class="navbar-link">FAQs</a>
+                <a href="kontakt.html" class="navbar-link">Kontakt</a>
+                <a href="link.html" class="navbar-link">Links</a>
+                <a href="report.html" class="navbar-link">Meldungen</a>
+                <a href="admin.html" class="navbar-link">Admin</a>
+            </div>
+        </nav>
+        <!-- Darkmode Umschalter -->
+        <label class="switch">
+            <input type="checkbox" id="dark-mode-toggle">
+            <span class="slider"></span>
+        </label>
+    </div>
+    
+    <div id="sidebar" style="display:none;">
+        <h2> </h2>
+        <ul>
+            <li><a href="#dashboard" id="dashboard-link">Dashboard</a></li>
+            <li><a href="#logs" id="logs-link">Logs</a></li>
+            <li><a href="#users" id="users-link">Benutzer</a></li>
+            <li><a href="#wishes" id="wishes-link">Offene Wünsche</a></li>
+            <li><a href="#feedback" id="feedback-link">Feedback</a></li>
+            <li><a href="#send-message" id="send-message-link">Nachricht an Benutzer</a></li>
+            <li><a href="#backups" id="backups-link">Backups</a></li>
+            <li><a href="#dev-report" id="dev-report-link">Dev Report</a></li>
+            <li><a href="#faq" id="faq-link">FAQs</a></li>
+            <li><a href="#admin-help" id="admin-help-link">Admin Hilfe</a></li>
+            <li><a href="#logout" id="logout-button" onclick="logout()">Logout</a></li>
+        </ul>
+    </div>
+
+    <div id="content">
+        <div id="login-form">
+            <div class="login-container">
+                <img src="img/Viper-plex-logo.png" alt="Logo" class="login-logo">
+                <h2>Admin Login</h2>
+                <form id="form" action="/admin" method="POST">
+                    <input type="password" name="password" placeholder="Passwort" required>
+                    <div class="error-message" id="error-message" style="display:none;">Ungültiges Passwort!</div>
+                    <button type="submit">Einloggen</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="admin-area" style="display:none;">
+            <h2>Willkommen im Admin-Bereich!</h2>
+            <p>Hier kannst du alle administrativen Funktionen nutzen.</p>
+            
+            <!-- Logout-Timer -->
+            <div id="logout-timer-box" style="display: flex; justify-content: flex-end; background-color: rgba(255, 255, 255, 0); padding: 10px; border-bottom: 2px solid rgba(255, 0, 0, 0);">
+                <div id="logout-timer" style="color: rgb(255, 0, 0); font-weight: bold;"></div>
+            </div>
+
+            <div id="dashboard">
+                <div class="dashboard-container">
+                    <div id="bot-uptime" class="dashboard-box">
+                        <div class="dashboard-header">
+                            <h3>Bot Laufzeit</h3>
+                            <button class="resize" onclick="resizeBox(this)">🔍</button>
+                        </div>
+                        Lade aktuelle Laufzeit des Bots...
+                    </div>
+                </div>
+                <div class="dashboard-container">
+                    <div id="bot-restart" class="dashboard-box">
+                        <div class="dashboard-header">
+                            <h3>Letzter Neustart</h3>
+                            <button class="resize" onclick="resizeBox(this)">🔍</button>
+                        </div>
+                        Lade letzten Neustart des Bots...
+                    </div>
+                </div>
+
+                <div id="media-count" class="dashboard-box">
+                    <div class="dashboard-header">
+                        <h3>Medienanzahl</h3>
+                        <button class="resize" onclick="resizeBox(this)"></button>
+                    </div>
+                    <div id="media-count-content">
+                        Lade Anzahl der Filme und Serien...
+                    </div>
+                </div>
+                
+                <div class="dashboard-container">
+                    <div id="server-info" class="dashboard-box">
+                        <div class="dashboard-header">
+                            <h3>Server Informationen</h3>
+                            <button class="resize" onclick="resizeBox(this)">🔍</button>
+                        </div>
+                        Lade Serverinformationen...
+                    </div>
+                </div>
+                <div class="dashboard-container">
+                    <div id="file-check" class="dashboard-box">
+                        <div class="dashboard-header">
+                            <h3>Dateiüberprüfung</h3>
+                            <button class="resize" onclick="resizeBox(this)">🔍</button>
+                        </div>
+                        Lade Dateiüberprüfung...
+                    </div>
+                </div>
+            </div>
+
+            <div id="faq-container" style="display: none;">
+                <div class="log-header">
+                    <h3>Häufig gestellte Fragen (FAQs)</h3>
+                    <button class="log-button blue-button" onclick="addFaq()">FAQ hinzufügen</button>
+                    <button class="log-button red-button" onclick="deleteFaq()">FAQ löschen</button>
+                </div>
+                <pre>Lade FAQs...</pre> <!-- Dieser <pre>-Tag wird verwendet, um die FAQs anzuzeigen -->
+            </div>
+           
+            <div id="logs" style="display:none;">
+                <h2>Logs</h2>
+            
+                <!-- Debug-Toggle Button -->
+                <div id="debug-toggle">
+                    <button id="debug-button" style="background-color: green; color: white;" onclick="toggleDebugMode()">Debug OFF</button>
+                </div>
+            
+                <div class="log-container">
+                    <div id="command-history" class="log-box">
+                        <div class="log-header">
+                            <h3>Command-Historie</h3>
+                            <button class="log-button" onclick="downloadCommandHistory()">Download Command Log</button>
+                            <button class="log-button red-button" onclick="deleteCommandHistory()">Kommando-Historie löschen</button>
+                        </div>
+                        <pre>Lade Command-Historie...</pre>
+                    </div>
+                    
+                    <div id="error-log" class="log-box">
+                        <div class="log-header">
+                            <h3>Fehlerprotokoll</h3>
+                            <button class="log-button" onclick="downloadErrorLog()">Download Error Log</button>
+                            <button class="log-button red-button" onclick="deleteErrorLog()">Fehlerprotokoll löschen</button>
+                        </div>
+                        <pre>Lade Fehlerprotokolle...</pre>
+                    </div>
+                </div>             
+            </div>
+
+            <!-- Benutzer (User) Bereich -->
+            <div id="users" style="display:none;">
+                <h2>Benutzerinformationen</h2>
+                <div id="users-content" class="users-box">
+                    <p>Lade Benutzerinformationen...</p>
+                </div>
+            </div>
+
+            <div id="send-message" style="display: none;">
+                <h2>Nachricht an alle Benutzer senden</h2>
+                <textarea id="message-input" rows="4" placeholder="Gib hier deine Nachricht ein..."></textarea>
+                <button onclick="sendMessage()">Nachricht senden</button>
+                <div id="send-message-status" style="margin-top: 10px;"></div>
+            </div>
+
+            <div id="wishes" style="display:none;">
+                <h2>Offene Wünsche</h2>
+                <div id="wishes-content" class="wishes-box">
+                    <p>Lade offene Wünsche...</p>
+                </div>
+            </div>
+
+            <div id="feedback" style="display:none;">
+                <h2>Feedback</h2>
+                <div id="feedback-content" class="feedback-box">
+                    <p>Lade Feedback...</p>
+                </div>
+            </div>
+            <div id="admin-help" style="display:none;"> <!-- Admin Hilfe Sektion -->
+                <h3>👨‍💻 Admin-Befehle</h3>
+                <p>Für Administratoren stehen folgende Befehle zur Verfügung:</p>
+                <ul>
+                    <li><strong>Nachricht senden:</strong> Mit <code>/admin</code> kannst du eine Nachricht an alle Nutzer senden.</li>
+                    <li><strong>Offene Wünsche:</strong> Der Befehl <code>/open_wishes</code> zeigt alle offenen Filmwünsche an.</li>
+                    <li><strong>Benutzerinformationen:</strong> Mit <code>/user</code> kannst du spezifische Benutzerinformationen abrufen.</li>
+                    <li><strong>Newsletter:</strong> Der Befehl <code>/newsletter</code> zeigt die Newsletter-Funktion an.</li>
+                    <li><strong>Logs:</strong> Verwende <code>/logs</code>, um die letzten Fehlermeldungen anzuzeigen.</li>
+                    <li><strong>Passwort:</strong> Verwende <code>/passwd</code>, um das Passwort vom Frontend anzuzeigen.</li>
+                    <li><strong>Support-Ticket:</strong> Verwende <code>/support</code>, um ein Support-Ticket an den Bot-Ersteller zu erstellen.</li>
+                </ul>
+            </br>
+        </br>
+
+                <h3>⚙️ Dev-Befehle</h3>
+                <p>Für Entwickler gibt es folgende spezielle Befehle:</p>
+                <ul>
+                    <li><strong>Aktualisieren:</strong> Mit <code>/update</code> wird die <code>user.yml</code> aktualisiert.</li>
+                    <li><strong>Befehlsverlauf:</strong> Der Befehl <code>/command_history</code> zeigt eine Liste der zuletzt verwendeten Befehle an.</li>
+                    <li><strong>Backup erstellen:</strong> Verwende <code>/backup</code>, um ein Backup zu erstellen und als ZIP-Datei zu senden.</li>
+                    <li><strong>Serverinfo:</strong> Mit <code>/serverinfo</code> erhältst du Informationen über den Server.</li>
+                    <li><strong>Health Check:</strong> Der Befehl <code>/healthcheck</code> überprüft den Bot.</li>
+                    <li><strong>Debug-Modus:</strong> Mit <code>/setdebug</code> kannst du den Debug-Modus aktivieren oder deaktivieren.</li>
+                </ul>
+            </div>
+
+            <!-- Backup-Bereich hinzufügen -->
+            <div id="backups" style="display:none; position: relative;"> <!-- relative Positionierung für den Container -->
+                <h2>Backups</h2>
+                <div class="log-header">
+                    <button id="create-backup">Backup erstellen</button>
+                    <div id="backup-status"></div>
+                </div>
+                <h3>Verfügbare Backups:</h3>
+                <div id="backups-list"></div>
+                
+                <!-- Hinweis-Label mit absoluter Positionierung -->
+                <p style="position: absolute; top: 20px; right: 20px; color: red;">
+                    Hinweis: Alle Backups sind durch ein Passwort geschützt!
+                </p>
+            </div>
+
+            <div id="dev-report" style="display: none;">
+                <h2>Entwicklerberichte</h2>
+                <div id="dev-report-content">
+                    <!-- Inhalte werden hier geladen -->
+                </div>
+            </div>
+            
+        </div>
+    </div>
+    <footer class="footer">
+        <p>&copy; 2024 Viper-Plex. Alle Rechte vorbehalten.</p>
+    </footer>
+<script src="js/admin.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/anleitung.html b/public/anleitung.html
new file mode 100644
index 0000000..037fc8a
--- /dev/null
+++ b/public/anleitung.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/anleitung.css">
+    <link rel="icon" type="image/png" href="img/Viper-plex-logo.png">
+    <title>Anleitung - Viper-Plex</title>
+</head>
+<body>
+     <!-- Logo separat einfügen -->
+     <div class="logo-container">
+        <a href="index.html">
+            <img src="img/Viper-plex-logo.png" alt="Viper-Plex Logo" class="logo">
+        </a>
+    </div>
+    <div class="welcome-box">
+        <h1>Anleitung zum Plex Telegram-Bot</h1>
+        <nav class="navbar">
+            <div class="navbar-container">
+                <a href="index.html" class="navbar-link">Home</a>
+                <a href="wunsch.html" class="navbar-link">Film & Serien wunsch</a>
+                <a href="anleitung.html" class="navbar-link">Anleitung</a>
+                <a href="funktionen.html" class="navbar-link">Funktionen</a>
+                <a href="faq.html" class="navbar-link">FAQs</a>
+                <a href="kontakt.html" class="navbar-link">Kontakt</a>
+                <a href="link.html" class="navbar-link">Links</a>
+                <a href="report.html" class="navbar-link">Meldungen</a>
+                <a href="admin.html" class="navbar-link">Admin</a>
+            </div>
+        </nav>
+        <label class="switch">
+            <input type="checkbox" id="dark-mode-toggle">
+            <span class="slider"></span>
+        </label>
+    </div>
+
+    <div class="container">
+        <main>
+            <h2>Willkommen zur Anleitung</h2>
+            <p>Diese Anleitung hilft dir dabei, den Plex Telegram-Bot optimal zu nutzen. Du wirst lernen, wie du dich registrierst, die verschiedenen Funktionen nutzt und bei Fragen Hilfe erhältst.</p>
+
+            <h3>1. Erste Schritte mit dem Bot</h3>
+            <p>Um den Bot zu starten, suche nach <strong id="bot-alias"></strong> in Telegram oder klicke auf den folgenden Link: <a id="telegram-link" href="#" target="_blank">Telegram Bot starten</a>.</p>
+            <p>Tippe den Befehl <code>/start</code>, um deinen Zugang zu registrieren. Der Bot wird dir eine Willkommensnachricht senden, die dir weitere Schritte erklärt.</p>
+
+            <h3>2. Benutzerregistrierung</h3>
+            <p>Nach dem Start des Bots wirst du aufgefordert, deinen Zugang zu registrieren. Folge den Anweisungen, die dir der Bot sendet. Dies kann die Eingabe deines Benutzernamens oder deiner Chat-ID umfassen.</p>
+
+            <h3>3. Benachrichtigungen</h3>
+            <p>Du kannst Benachrichtigungen für neue Filme aktivieren oder deaktivieren. Verwende die folgenden Befehle:</p>
+            <ul>
+                <li><code>/notification_on</code> – Aktiviere Benachrichtigungen.</li>
+                <li><code>/notification_off</code> – Deaktiviere Benachrichtigungen.</li>
+            </ul>
+
+            <h3>4. Filme und Serien anzeigen</h3>
+            <p>Der Bot bietet verschiedene Möglichkeiten, Filme und Serien zu durchsuchen:</p>
+            <ul>
+                <li><code>/serien</code> – Zeigt eine Liste aller verfügbaren Serien.</li>
+                <li><code>/latestmovie</code> – Zeigt den zuletzt hinzugefügten Film.</li>
+                <li><code>/latest10movies</code> – Zeigt die letzten 10 hinzugefügten Filme.</li>
+                <li><code>/top_rated</code> – Zeigt die am besten bewerteten Filme.</li>
+            </ul>
+
+            <h3>5. Filmwünsche und Empfehlungen</h3>
+            <p>Wenn du einen bestimmten Film sehen möchtest, kannst du den Wunsch über den Bot äußern:</p>
+            <ul>
+                <li><code>/wunsch</code> – Filmwunsch äußern.</li>
+                <li><code>/trailer</code> – Trailer für einen bestimmten Film anfordern.</li>
+                <li><code>/empfehlung</code> – Tägliche Filmempfehlung erhalten.</li>
+                <li><code>/newsletter</code> – Über neue Filme informiert werden.</li>
+            </ul>
+
+            <h3>6. Hilfe und Support</h3>
+            <p>Wenn du weitere Unterstützung benötigst, kannst du jederzeit den Befehl <code>/help</code> eingeben, um eine Liste von Befehlen und deren Funktionen zu erhalten.</p>
+            <p>Bei weiteren Fragen kannst du unseren Telegram-Support kontaktieren: <a href="https://t.me/M_Viper04">Support kontaktieren</a>.</p>
+            </ul>
+
+            <h3>Fazit</h3>
+            <p>Der Plex Telegram-Bot ist ein leistungsfähiges Tool, um Filme und Serien bequem über Telegram zu verwalten. Mit den oben genannten Funktionen kannst du schnell und einfach auf alle Inhalte zugreifen. Viel Spaß beim Entdecken!</p>
+        </main>
+    </div>
+
+    <footer class="footer">
+        <p>&copy; 2024 Viper-Plex. Alle Rechte vorbehalten.</p>
+    </footer>
+
+    <script>
+        // Darkmode umschalten
+        const toggle = document.getElementById('dark-mode-toggle');
+        const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
+        toggle.checked = darkModeEnabled;
+        if (darkModeEnabled) {
+            document.body.classList.add('dark-mode');
+        }
+
+        toggle.addEventListener('change', () => {
+            const isChecked = toggle.checked;
+            document.body.classList.toggle('dark-mode', isChecked);
+            localStorage.setItem('darkMode', isChecked);
+        });
+
+        // Funktion, um die Umgebungsvariablen abzurufen
+        const fetchEnvVariables = async () => {
+            const response = await fetch('/api/env');
+            const data = await response.json();
+
+            document.getElementById('bot-alias').textContent = data.botAlias;
+            document.getElementById('telegram-link').href = data.telegramLink;
+        };
+
+        // Umgebungsvariablen beim Laden der Seite abrufen
+        window.onload = () => {
+            fetchEnvVariables();
+            fetchMovies(); // Hier kannst du auch die Filme abrufen, falls nötig
+        };
+    </script>
+</body>
+</html>
diff --git a/public/faq.html b/public/faq.html
new file mode 100644
index 0000000..9e98d32
--- /dev/null
+++ b/public/faq.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="icon" type="image/png" href="img/Viper-plex-logo.png">
+    
+    <title>Viper-Plex FAQs</title>
+    
+</head>
+<body>
+    <div class="logo-container">
+        <a href="index.html">
+            <img src="img/Viper-plex-logo.png" alt="Viper-Plex Logo" class="logo">
+        </a>
+    </div>
+    <div class="welcome-box">
+        <h1>Viper-Plex FAQs</h1>
+        <nav class="navbar">
+            <div class="navbar-container">
+                <a href="index.html" class="navbar-link">Home</a>
+                <a href="wunsch.html" class="navbar-link">Film & Serien Wunsch</a>
+                <a href="anleitung.html" class="navbar-link">Anleitung</a>
+                <a href="funktionen.html" class="navbar-link">Funktionen</a>
+                <a href="faq.html" class="navbar-link">FAQs</a>
+                <a href="kontakt.html" class="navbar-link">Kontakt</a>
+                <a href="link.html" class="navbar-link">Links</a>
+                <a href="report.html" class="navbar-link">Meldungen</a>
+                <a href="admin.html" class="navbar-link">Admin</a>
+            </div>
+        </nav>
+        <label class="switch">
+            <input type="checkbox" id="dark-mode-toggle">
+            <span class="slider"></span>
+        </label>
+    </div>
+
+    <div class="container">
+        <main class="faq-container" id="faq-section">
+            <h2>Häufig gestellte Fragen</h2>
+            <p>Bitte warten, während die FAQs geladen werden...</p>
+        </main>
+        <aside class="sidebar">
+            <div class="gitea-box">
+                <p>Sieh dir den Code auf <a href="https://git.viper.ipv64.net/M_Viper/Plex-Telegram-Bot" target="_blank">Gitea</a> an!</p>
+                <p>Aktuelle Version: <span id="bot-version"></span></p>
+                <div class="telegram-connect-box">
+                    <p>Verbinde dich mit unserem Telegram-Bot!</p>
+                    <a id="telegram-link" href="#" target="_blank">Jetzt verbinden</a>
+                </div>
+            </div>
+        </aside>
+    </div>
+
+    <footer class="footer">
+        <p>&copy; 2024 Viper-Plex. Alle Rechte vorbehalten.</p>
+    </footer>
+
+    <script>
+        // Funktion zum Abrufen der FAQs
+        function fetchFaqs() {
+            fetch('/api/faqs')
+                .then(response => response.json())
+                .then(data => {
+                    const faqSection = document.getElementById('faq-section');
+                    faqSection.innerHTML = ''; // Leere den Inhalt zuerst
+
+                    if (data.length === 0) {
+                        faqSection.innerHTML = '<p><h3>Es gibt derzeit keine FAQs.</h3></p>';
+                    } else {
+                        data.forEach((faq, index) => {
+                            const faqItem = document.createElement('div');
+                            faqItem.classList.add('faq-item');
+                            
+                            const faqToggle = document.createElement('div');
+                            faqToggle.classList.add('faq-toggle');
+                            faqToggle.innerHTML = `<h3 class="faq-question">${index + 1}. ${faq.question}</h3>
+                                                   <i class="fas fa-chevron-down arrow"></i>`;
+                            faqItem.appendChild(faqToggle);
+
+                            const faqAnswer = document.createElement('p');
+                            faqAnswer.classList.add('faq-answer');
+                            faqAnswer.innerText = faq.answer;
+                            faqItem.appendChild(faqAnswer);
+                            
+                            // Event-Listener hinzufügen, um die Antwort anzuzeigen oder auszublenden
+                            faqToggle.addEventListener('click', () => {
+                                faqAnswer.classList.toggle('show');
+                                const arrow = faqToggle.querySelector('.arrow');
+                                arrow.style.transform = faqAnswer.classList.contains('show') ? 'rotate(180deg)' : 'rotate(0deg)';
+                            });
+                            
+                            faqSection.appendChild(faqItem);
+                        });
+                    }
+                })
+                .catch(error => console.error('Fehler beim Abrufen der FAQs:', error));
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            // FAQs beim Laden der Seite abrufen
+            fetchFaqs();
+
+            // Darkmode umschalten
+            const toggle = document.getElementById('dark-mode-toggle');
+
+            // Darkmode-Zustand beim Laden der Seite überprüfen und anwenden
+            const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
+            toggle.checked = darkModeEnabled;
+            if (darkModeEnabled) {
+                document.body.classList.add('dark-mode');
+            }
+
+            toggle.addEventListener('change', () => {
+                const isChecked = toggle.checked;
+                document.body.classList.toggle('dark-mode', isChecked);
+                // Speichere den Zustand in localStorage
+                localStorage.setItem('darkMode', isChecked);
+            });
+
+            // Version abrufen
+            fetch('/api/bot-version')
+                .then(response => response.json())
+                .then(data => {
+                    const botVersion = document.getElementById('bot-version');
+                    botVersion.textContent = data.version; // Setze die Versionsnummer
+                })
+                .catch(error => console.error('Fehler beim Abrufen der Bot-Version:', error));
+        });
+    </script>
+</body>
+</html>
diff --git a/public/funktionen.html b/public/funktionen.html
new file mode 100644
index 0000000..9f54e70
--- /dev/null
+++ b/public/funktionen.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/funktionen.css">
+    <link rel="icon" type="image/png" href="img/Viper-plex-logo.png">
+    <title>Funktionen - Viper-Plex</title>
+</head>
+<body>
+     <!-- Logo separat einfügen -->
+     <div class="logo-container">
+        <a href="index.html">
+            <img src="img/Viper-plex-logo.png" alt="Viper-Plex Logo" class="logo">
+        </a>
+    </div>
+    <div class="welcome-box">
+        <h1>Funktionen des Bots</h1>
+        <nav class="navbar">
+            <div class="navbar-container">
+                <a href="index.html" class="navbar-link">Home</a>
+                <a href="wunsch.html" class="navbar-link">Film & Serien wunsch</a>
+                <a href="anleitung.html" class="navbar-link">Anleitung</a>
+                <a href="funktionen.html" class="navbar-link">Funktionen</a>
+                <a href="faq.html" class="navbar-link">FAQs</a>
+                <a href="kontakt.html" class="navbar-link">Kontakt</a>
+                <a href="link.html" class="navbar-link">Links</a>
+                <a href="report.html" class="navbar-link">Meldungen</a>
+                <a href="admin.html" class="navbar-link">Admin</a>
+            </div>
+        </nav>
+        <label class="switch">
+            <input type="checkbox" id="dark-mode-toggle">
+            <span class="slider"></span>
+        </label>
+    </div>
+
+    <div class="container">
+        <main>
+            <h2>Willkommen zur Anleitung für den Plex Telegram Bot!</h2>
+            <p>Hier findest du alles, was du wissen musst, um den Bot optimal zu nutzen:</p>
+
+            <h3>1. Registrierung</h3>
+            <p>Um den Bot zu nutzen, beginne mit dem Befehl <code>/start</code>. Damit registrierst du deinen Zugang und erhältst eine Willkommensnachricht.</p>
+
+            <h3>2. Benachrichtigungen aktivieren/deaktivieren</h3>
+            <ul>
+                <li><strong>Aktivieren:</strong> Mit dem Befehl <code>/notification_on</code> kannst du Benachrichtigungen für neue Filme aktivieren.</li>
+                <li><strong>Deaktivieren:</strong> Verwende <code>/notification_off</code>, um die Benachrichtigungen abzuschalten.</li>
+            </ul>
+
+            <h3>3. Filme und Serien anzeigen</h3>
+            <ul>
+                <li><strong>Serienliste:</strong> Um alle verfügbaren Serien anzuzeigen, nutze <code>/serien</code>.</li>
+                <li><strong>Letzter Film:</strong> Der zuletzt hinzugefügte Film kann mit <code>/latestmovie</code> angezeigt werden.</li>
+                <li><strong>Letzte 10 Filme:</strong> Verwende <code>/latest10movies</code>, um die letzten 10 hinzugefügten Filme anzuzeigen.</li>
+                <li><strong>Top-Bewertungen:</strong> Mit dem Befehl <code>/top_rated</code> kannst du die am besten bewerteten Filme sehen.</li>
+            </ul>
+
+            <h3>4. Wünsche äußern</h3>
+            <p>Wenn du einen Filmwunsch hast, benutze den Befehl <code>/wunsch</code>. Um einen Trailer für einen bestimmten Film anzufordern, nutze <code>/trailer</code>.</p>
+
+            <h3>5. Empfehlungen</h3>
+            <ul>
+                <li><strong>Film Empfehlung:</strong> Erhalte täglich eine Filmempfehlung mit <code>/empfehlung</code>.</li>
+                <li><strong>Newsletter:</strong> Möchtest du über neue Filme informiert werden? Verwende den Befehl <code>/newsletter</code>.</li>
+            </ul>
+
+            <h3>6. Hilfe und Support</h3>
+            <p>Falls du weitere Informationen benötigst, kannst du jederzeit <code>/help</code> eingeben, um diese Hilfennachricht anzuzeigen.</p>
+
+            <h3>📜 Weitere Funktionen</h3>
+            <h4>7. Weitere Hilfe</h4>
+            <ul>
+                <li><strong>Profil anzeigen:</strong> Nutze <code>/profil</code>, um dein Benutzerprofil anzuzeigen.</li>
+                <li><strong>Wunschliste:</strong> Mit dem Befehl <code>/w_list</code> siehst du alle deine Filmwünsche.</li>
+                <li><strong>Feedback geben:</strong> Verwende <code>/feedback</code>, um deine Meinung zum Bot mitzuteilen.</li>
+                <li><strong>FAQ:</strong> Erhalte Antworten auf häufig gestellte Fragen mit dem Befehl <code>/faq</code>.</li>
+                <li><strong>Info:</strong> Mit <code>/info</code> kannst du die Anzahl der verfügbaren Filme und Serien erfahren.</li>
+                <li><strong>Bot-Informationen:</strong> Verwende <code>/bot</code>, um Informationen über den Bot zu erhalten.</li>
+            </ul>
+
+            
+        </main>
+    </div>
+
+
+    <footer class="footer">
+        <p>&copy; 2024 Viper-Plex. Alle Rechte vorbehalten.</p>
+    </footer>
+
+    <script>
+        // Darkmode umschalten
+        const toggle = document.getElementById('dark-mode-toggle');
+        const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
+        toggle.checked = darkModeEnabled;
+        if (darkModeEnabled) {
+            document.body.classList.add('dark-mode');
+        }
+
+        toggle.addEventListener('change', () => {
+            const isChecked = toggle.checked;
+            document.body.classList.toggle('dark-mode', isChecked);
+            localStorage.setItem('darkMode', isChecked);
+        });
+    </script>
+</body>
+</html>
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..d607a10
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="icon" type="image/png" href="img/Viper-plex-logo.png">
+    <title>Viper-Plex</title>
+</head>
+<body>
+     <!-- Logo separat einfügen -->
+     <div class="logo-container">
+        <a href="index.html">
+            <img src="img/Viper-plex-logo.png" alt="Viper-Plex Logo" class="logo">
+        </a>
+    </div>
+    <div class="welcome-box">
+        <h1>Willkommen bei Viper-Plex</h1>
+        <nav class="navbar">
+            <div class="navbar-container">
+                <a href="index.html" class="navbar-link">Home</a>
+                <a href="wunsch.html" class="navbar-link">Film & Serien Wunsch</a>
+                <a href="anleitung.html" class="navbar-link">Anleitung</a>
+                <a href="funktionen.html" class="navbar-link">Funktionen</a>
+                <a href="faq.html" class="navbar-link">FAQs</a>
+                <a href="kontakt.html" class="navbar-link">Kontakt</a>
+                <a href="link.html" class="navbar-link">Links</a>
+                <a href="report.html" class="navbar-link">Meldungen</a>
+                <a href="admin.html" class="navbar-link">Admin</a>
+            </div>
+        </nav>
+        <label class="switch">
+            <input type="checkbox" id="dark-mode-toggle">
+            <span class="slider"></span>
+        </label>
+    </div>
+
+    <div class="container">
+        <main>
+            <div class="movies-box">
+                <h2>Neueste Filme</h2>
+                <ul id="movies-list"></ul>
+            </div>
+        </main>
+        <aside class="sidebar">
+            <div class="newsletter-box">
+                <h2>Newsletter Anmeldung</h2>
+                <form id="subscribe-form">
+                    <input type="email" id="email" placeholder="E-Mail-Adresse" required>
+                    <input type="text" id="username" placeholder="Benutzername" required>
+                    <button type="submit">Anmelden</button>
+                </form>
+            </div>
+            <div class="gitea-box">
+                <p>Sieh dir den Code auf <a href="https://git.viper.ipv64.net/M_Viper/Plex-Telegram-Bot" target="_blank">Gitea</a> an!</p>
+                <p>Aktuelle Version: <span id="bot-version"></span></p>
+                <div class="telegram-connect-box">
+                    <p>Verbinde dich mit unserem Telegram-Bot!</p>
+                    <a id="telegram-link" href="#" target="_blank">Jetzt verbinden</a>
+                </div>
+            </div>
+        </aside>
+    </div>
+
+    <footer class="footer">
+        <p>&copy; 2024 Viper-Plex. Alle Rechte vorbehalten.</p>
+        <span id="changelog-icon" style="cursor: pointer;">❓</span>
+    </footer>
+
+    <div id="changelog-popup" class="popup">
+        <div class="popup-content">
+            <span class="close" id="close-popup">&times;</span>
+            <h2>Changelog</h2>
+            <ul id="changelog-list"></ul>
+        </div>
+    </div>
+
+    <script>
+        // Funktion, um die Umgebungsvariablen abzurufen
+        const fetchEnvVariables = async () => {
+            const response = await fetch('/api/env');
+            const data = await response.json();
+    
+            document.getElementById('bot-alias').textContent = data.botAlias;
+            document.getElementById('telegram-link').href = data.telegramLink;
+        };
+    
+        document.addEventListener('DOMContentLoaded', () => {
+            fetch('/api/telegram-link') // API-Endpunkt zum Abrufen des Telegram-Links
+                .then(response => response.json())
+                .then(data => {
+                    const telegramLink = document.getElementById('telegram-link');
+                    telegramLink.href = data.link; // Setze den Link im Anchor-Tag
+                })
+                .catch(error => console.error('Fehler beim Abrufen des Telegram-Links:', error));
+    
+            // Version abrufen
+            fetch('/api/bot-version')
+                .then(response => response.json())
+                .then(data => {
+                    const botVersion = document.getElementById('bot-version');
+                    botVersion.textContent = data.version; // Setze die Versionsnummer
+                })
+                .catch(error => console.error('Fehler beim Abrufen der Bot-Version:', error));
+    
+            // Funktion, um die neuesten Filme abzurufen
+            async function fetchLatestMovies() {
+                try {
+                    const response = await fetch('/api/latest-movies'); // API-URL
+                    const movies = await response.json(); // Filme abrufen
+                    const moviesList = document.getElementById('movies-list');
+
+                    // Leere die Liste, bevor du neue Filme hinzufügst
+                    moviesList.innerHTML = '';
+
+                    // Füge die neuesten Filme zur Liste hinzu
+                    movies.forEach(movie => {
+                        const listItem = document.createElement('li');
+                        listItem.classList.add('movie-item'); // Füge Klasse hinzu für CSS
+
+                        // Erstelle das Coverbild
+                        const coverImage = document.createElement('img');
+                        coverImage.src = movie.coverImage; // URL des Coverbilds
+                        coverImage.alt = movie.title; // Alternativtext für das Bild
+
+                        // Überprüfen, ob das Bild geladen werden kann
+                        coverImage.onerror = () => {
+                            console.error(`Konnte das Bild für ${movie.title} nicht laden: ${coverImage.src}`);
+                            coverImage.src = 'fallback-image-url.jpg'; // Fallback-Bild, wenn das Bild nicht geladen werden kann
+                        };
+
+                        // Füge das Bild zur Liste hinzu
+                        listItem.appendChild(coverImage);
+                        moviesList.appendChild(listItem);
+                    });
+
+                    // Animation für das Einblenden der Filme
+                    requestAnimationFrame(() => {
+                        moviesList.childNodes.forEach((item, index) => {
+                            setTimeout(() => {
+                                item.style.opacity = 1; // Opazität für sanftes Einblenden
+                            }, index * 100); // Verzögerung für jeden Film
+                        });
+                    });
+
+                } catch (error) {
+                    console.error('Fehler beim Abrufen der Filme:', error);
+                }
+            }
+
+            // Event-Listener für das Formular
+            document.getElementById('subscribe-form').addEventListener('submit', function(event) {
+                event.preventDefault();
+                const email = document.getElementById('email').value;
+                const username = document.getElementById('username').value;
+
+                // Generiere eine Dummy-Chat-ID
+                const chatId = Math.floor(Math.random() * 1000000); // Zufällige Zahl zwischen 0 und 999999
+
+                fetch('/subscribe', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email, chatId, username })
+                })
+                .then(response => response.text())
+                .then(data => alert(data))
+                .catch(error => alert('Fehler: ' + error));
+            });
+
+            // Darkmode umschalten
+            const toggle = document.getElementById('dark-mode-toggle');
+
+            // Darkmode-Zustand beim Laden der Seite überprüfen und anwenden
+            const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
+            toggle.checked = darkModeEnabled;
+            if (darkModeEnabled) {
+                document.body.classList.add('dark-mode');
+            }
+
+            toggle.addEventListener('change', () => {
+                const isChecked = toggle.checked;
+                document.body.classList.toggle('dark-mode', isChecked);
+                // Speichere den Zustand in localStorage
+                localStorage.setItem('darkMode', isChecked);
+            });
+
+            // Beim Laden der Seite die neuesten Filme abrufen
+            window.onload = fetchLatestMovies;
+
+            // Aktualisiere die Filme jede Minute (60000 Millisekunden)
+            setInterval(fetchLatestMovies, 60000);
+
+            // Changelog-Daten
+            const changelogData = {
+    "changelog": [
+        {
+            "version": "1.8.4",  
+            "date": "2024-10-17", 
+            "changes": [
+                "Backups Passwort schutz"
+            ]
+        },
+        {
+            "version": "1.8.3",  
+            "date": "2024-10-17", 
+            "changes": [
+                "Logout Timer hinzugefügt.",
+                "Automatisches Logout bei Inaktivität",
+                "Login-Seite überarbeitet für bessere Benutzerfreundlichkeit.",
+                "Darkmode im Adminbereich hinzugefügt."
+            ]
+        },
+        {
+            "version": "1.8.2",  
+            "date": "2024-10-16", 
+            "changes": [
+                "Neue FAQ-Seite für Benutzer hinzugefügt.",
+                "Benutzerfreundliche Darstellung der FAQs.",
+                "Verbesserte Performance bei der Datenabfrage.",
+                "Diverse kleinere Fehlerbehebungen."
+            ]
+        },
+        {
+            "version": "1.8.1",
+            "date": "2024-10-16",
+            "changes": [
+                "Bugfix mit Darkmode.",
+                "Dev-Report hinzugefügt (Bug-Report & Funktionswünsche)."
+            ]
+        },
+        {
+            "version": "1.8.0",
+            "date": "2024-10-14",
+            "changes": [
+                "Neue Funktionen hinzugefügt.",
+                "Verbesserte Benutzeroberfläche für die Admin-Seite.",
+                "Optimierungen im Bot für schnellere Reaktionen."
+            ]
+        },
+        {
+            "version": "1.7.9",
+            "date": "2024-10-10",
+            "changes": [
+                "Fehlerbehebungen und Optimierungen.",
+                "Verbesserte Sicherheit der Benutzerdaten.",
+                "Aktualisierte Dokumentation."
+            ]
+        }
+    ]
+};
+
+
+            // Changelog im Popup anzeigen
+            const changelogList = document.getElementById('changelog-list');
+
+            changelogData.changelog.forEach(entry => {
+                const changelogItem = document.createElement('div');
+                changelogItem.classList.add('changelog-entry'); // Füge eine Klasse für das Styling hinzu
+
+                changelogItem.innerHTML = `
+                    <strong>Version ${entry.version} (${entry.date}):</strong>
+                    <ul>
+                        ${entry.changes.map(change => `<li>${change}</li>`).join('')}
+                    </ul>
+                `;
+                changelogList.appendChild(changelogItem);
+            });
+
+            // Changelog-Popup-Elemente
+            const changelogIcon = document.getElementById('changelog-icon');
+            const popup = document.getElementById('changelog-popup');
+            const closePopup = document.getElementById('close-popup');
+
+            // Popup öffnen
+            changelogIcon.addEventListener('click', () => {
+                popup.style.display = 'block';
+                document.body.classList.toggle('dark-mode', toggle.checked); // Darkmode bei Popup-Anzeige aktivieren
+            });
+
+            // Popup schließen
+            closePopup.addEventListener('click', () => {
+                popup.style.display = 'none';
+                document.body.classList.toggle('dark-mode', toggle.checked); // Darkmode wieder zurücksetzen
+            });
+
+            // Klick außerhalb des Popups schließt es
+            window.addEventListener('click', (event) => {
+                if (event.target === popup) {
+                    popup.style.display = 'none';
+                    document.body.classList.toggle('dark-mode', toggle.checked); // Darkmode wieder zurücksetzen
+                }
+            });
+        });
+        
+    </script>
+</body>
+</html>
diff --git a/public/kontakt.html b/public/kontakt.html
new file mode 100644
index 0000000..07bca7e
--- /dev/null
+++ b/public/kontakt.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="icon" type="image/png" href="img/Viper-plex-logo.png">
+    <title>Kontakt - Viper-Plex</title>
+</head>
+<body>
+     <!-- Logo separat einfügen -->
+     <div class="logo-container">
+        <a href="index.html">
+            <img src="img/Viper-plex-logo.png" alt="Viper-Plex Logo" class="logo">
+        </a>
+    </div>
+    <div class="welcome-box">
+        <h1>Kontakt</h1>
+        <nav class="navbar">
+            <div class="navbar-container">
+                <a href="index.html" class="navbar-link">Home</a>
+                <a href="wunsch.html" class="navbar-link">Film & Serien wunsch</a>
+                <a href="anleitung.html" class="navbar-link">Anleitung</a>
+                <a href="funktionen.html" class="navbar-link">Funktionen</a>
+                <a href="faq.html" class="navbar-link">FAQs</a>
+                <a href="kontakt.html" class="navbar-link">Kontakt</a>
+                <a href="link.html" class="navbar-link">Links</a>
+                <a href="report.html" class="navbar-link">Meldungen</a>
+                <a href="admin.html" class="navbar-link">Admin</a>
+            </div>
+        </nav>
+        <label class="switch">
+            <input type="checkbox" id="dark-mode-toggle">
+            <span class="slider"></span>
+        </label>
+    </div>
+
+    <div class="container">
+        <main>
+            <h3>Kontaktinformationen</h3>
+            <p>Wenn du Fragen oder Anregungen hast, kannst du uns hier kontaktieren:</p>
+            <p>Email: <a id="contact-email" href="#"></a></p>
+            <p>Telegram: <a id="contact-telegram" href="#" target="_blank"></a></p>
+            <p>Wir freuen uns über dein Feedback!</p>
+        </main>
+    </div>
+
+    <footer class="footer">
+        <p>&copy; 2024 Viper-Plex. Alle Rechte vorbehalten.</p>
+    </footer>
+
+    <script>
+        // Darkmode umschalten
+        const toggle = document.getElementById('dark-mode-toggle');
+        const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
+        toggle.checked = darkModeEnabled;
+        if (darkModeEnabled) {
+            document.body.classList.add('dark-mode');
+        }
+
+        toggle.addEventListener('change', () => {
+            const isChecked = toggle.checked;
+            document.body.classList.toggle('dark-mode', isChecked);
+            localStorage.setItem('darkMode', isChecked);
+        });
+
+        // Kontaktinformationen aus .env abrufen
+        document.addEventListener('DOMContentLoaded', () => {
+            fetch('/api/contact-info') // API-Endpunkt zum Abrufen der Kontaktinformationen
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('contact-email').href = `mailto:${data.email}`;
+                    document.getElementById('contact-email').textContent = data.email;
+                    document.getElementById('contact-telegram').href = data.telegram;
+                    document.getElementById('contact-telegram').textContent = data.telegram.split('/').pop(); // Extrahiere den Benutzernamen aus der URL
+                })
+                .catch(error => console.error('Fehler beim Abrufen der Kontaktinformationen:', error));
+        });
+    </script>
+</body>
+</html>
diff --git a/public/link.html b/public/link.html
new file mode 100644
index 0000000..b0bff14
--- /dev/null
+++ b/public/link.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="icon" type="image/png" href="img/Viper-plex-logo.png">
+    
+    <title>Viper-Plex Links</title>
+    
+</head>
+<body>
+     <!-- Logo separat einfügen -->
+     <div class="logo-container">
+        <a href="index.html">
+            <img src="img/Viper-plex-logo.png" alt="Viper-Plex Logo" class="logo">
+        </a>
+    </div>
+    <div class="welcome-box">
+        <h1>Viper-Plex Links</h1>
+        <nav class="navbar">
+            <div class="navbar-container">
+                <a href="index.html" class="navbar-link">Home</a>
+                <a href="wunsch.html" class="navbar-link">Film & Serien wunsch</a>
+                <a href="anleitung.html" class="navbar-link">Anleitung</a>
+                <a href="funktionen.html" class="navbar-link">Funktionen</a>
+                <a href="faq.html" class="navbar-link">FAQs</a>
+                <a href="kontakt.html" class="navbar-link">Kontakt</a>
+                <a href="link.html" class="navbar-link">Links</a>
+                <a href="report.html" class="navbar-link">Meldungen</a>
+                <a href="admin.html" class="navbar-link">Admin</a>
+            </div>
+        </nav>
+        <label class="switch">
+            <input type="checkbox" id="dark-mode-toggle">
+            <span class="slider"></span>
+        </label>
+    </div>
+
+    <div class="container">
+        <main>
+            <h3>Wichtige Links</h3></br>
+            <ul class="links-list">
+                <li><a href="https://git.viper.ipv64.net/M_Viper/Plex-Telegram-Bot" target="_blank"><i class="fab fa-git-alt"></i> Gitea</a></li>
+                <li><a href="https://plex.viper-918.myds.me" target="_blank"><i class="fas fa-globe"></i> Plex Webseite</a></li>
+                <li><a href="https://m-viper.de" target="_blank"><i class="fas fa-home"></i> Webseite</a></li>
+                <li><a href="https://t.me/M_Viper04" target="_blank"><i class="fab fa-telegram-plane"></i> Telegram</a></li>
+                <li><a href="https://git.viper.ipv64.net/M_Viper/Plex-Telegram-Bot/issues" target="_blank"><i class="fas fa-comment-dots"></i> Feedback & Vorschläge</a></li>
+            </ul>
+            
+        </main>
+        <aside class="sidebar">
+            <div class="gitea-box">
+                <p>Sieh dir den Code auf <a href="https://git.viper.ipv64.net/M_Viper/Plex-Telegram-Bot" target="_blank">Gitea</a> an!</p>
+                <p>Aktuelle Version: <span id="bot-version"></span></p>
+                <div class="telegram-connect-box">
+                    <p>Verbinde dich mit unserem Telegram-Bot!</p>
+                    <a id="telegram-link" href="#" target="_blank">Jetzt verbinden</a>
+                </div>
+            </div>
+        </aside>
+    </div>
+
+    <footer class="footer">
+        <p>&copy; 2024 Viper-Plex. Alle Rechte vorbehalten.</p>
+    </footer>
+
+    <script>
+        // Funktion, um die Umgebungsvariablen abzurufen
+        const fetchEnvVariables = async () => {
+            const response = await fetch('/api/env');
+            const data = await response.json();
+
+            document.getElementById('bot-alias').textContent = data.botAlias;
+            document.getElementById('telegram-link').href = data.telegramLink;
+        };
+
+        document.addEventListener('DOMContentLoaded', () => {
+            fetch('/api/telegram-link') // API-Endpunkt zum Abrufen des Telegram-Links
+                .then(response => response.json())
+                .then(data => {
+                    const telegramLink = document.getElementById('telegram-link');
+                    telegramLink.href = data.link; // Setze den Link im Anchor-Tag
+                })
+                .catch(error => console.error('Fehler beim Abrufen des Telegram-Links:', error));
+
+            // Version abrufen
+            fetch('/api/bot-version')
+                .then(response => response.json())
+                .then(data => {
+                    const botVersion = document.getElementById('bot-version');
+                    botVersion.textContent = data.version; // Setze die Versionsnummer
+                })
+                .catch(error => console.error('Fehler beim Abrufen der Bot-Version:', error));
+
+            // Darkmode umschalten
+            const toggle = document.getElementById('dark-mode-toggle');
+
+            // Darkmode-Zustand beim Laden der Seite überprüfen und anwenden
+            const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
+            toggle.checked = darkModeEnabled;
+            if (darkModeEnabled) {
+                document.body.classList.add('dark-mode');
+            }
+
+            toggle.addEventListener('change', () => {
+                const isChecked = toggle.checked;
+                document.body.classList.toggle('dark-mode', isChecked);
+                // Speichere den Zustand in localStorage
+                localStorage.setItem('darkMode', isChecked);
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/public/report.html b/public/report.html
new file mode 100644
index 0000000..bca6fa2
--- /dev/null
+++ b/public/report.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="icon" type="image/png" href="img/Viper-plex-logo.png">
+    <title>Viper-Plex - Meldung von Bugs und Funktionswünschen</title>
+</head>
+<body>
+    <div class="logo-container">
+        <a href="index.html">
+            <img src="img/Viper-plex-logo.png" alt="Viper-Plex Logo" class="logo">
+        </a>
+    </div>
+    <div class="welcome-box">
+        <h1>Willkommen bei Viper-Plex</h1>
+        <nav class="navbar">
+            <div class="navbar-container">
+                <a href="index.html" class="navbar-link">Home</a>
+                <a href="wunsch.html" class="navbar-link">Film & Serien Wunsch</a>
+                <a href="anleitung.html" class="navbar-link">Anleitung</a>
+                <a href="funktionen.html" class="navbar-link">Funktionen</a>
+                <a href="faq.html" class="navbar-link">FAQs</a>
+                <a href="kontakt.html" class="navbar-link">Kontakt</a>
+                <a href="link.html" class="navbar-link">Links</a>
+                <a href="report.html" class="navbar-link">Meldungen</a>
+                <a href="admin.html" class="navbar-link">Admin</a>
+            </div>
+        </nav>
+        <label class="switch">
+            <input type="checkbox" id="dark-mode-toggle">
+            <span class="slider"></span>
+        </label>
+    </div>
+
+    <div class="container">
+        <main>
+            <h2>Bug oder Funktionswunsch melden</h2>
+            <form id="report-form">
+                <label for="report-type">Typ:</label>
+                <select id="report-type" required>
+                    <option value="Bug">Bug</option>
+                    <option value="Funktionswunsch">Funktionswunsch</option>
+                </select>
+                
+                <label for="username">Benutzername:</label>
+                <input type="text" id="username" placeholder="Benutzername" required>
+
+                <label for="message">Nachricht:</label>
+                <textarea id="message" placeholder="Beschreibe den Bug oder den Funktionswunsch" required></textarea>
+
+                <button type="submit">Melden</button>
+            </form>
+
+            <!-- Bestätigungsmeldung -->
+            <div id="confirmation" style="display: none; margin-top: 20px;">
+                <p>Vielen Dank! Deine Nachricht wurde erfolgreich gesendet.</p>
+            </div>
+        </main>
+    </div>
+
+    <footer class="footer">
+        <p>&copy; 2024 Viper-Plex. Alle Rechte vorbehalten.</p>
+    </footer>
+
+    <div id="changelog-popup" class="popup">
+        <div class="popup-content">
+            <span class="close" id="close-popup">&times;</span>
+            <h2>Changelog</h2>
+            <ul id="changelog-list"></ul>
+        </div>
+    </div>
+
+    <script>
+        document.getElementById('report-form').addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            const type = document.getElementById('report-type').value;
+            const user = { name: document.getElementById('username').value };
+            const message = document.getElementById('message').value;
+
+            fetch('/api/submit-report', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ type, user, message })
+            })
+            .then(response => response.json())
+            .then(data => {
+                // Bestätigung anzeigen
+                document.getElementById('confirmation').style.display = 'block';
+                
+                // Formular leeren
+                document.getElementById('report-form').reset();
+
+                // Bestätigung nach 5 Sekunden ausblenden
+                setTimeout(() => {
+                    document.getElementById('confirmation').style.display = 'none';
+                }, 5000);
+            })
+            .catch(error => {
+                console.error('Fehler beim Übermitteln des Berichts:', error);
+                alert('Es gab ein Problem beim Senden des Berichts. Bitte versuche es später erneut.');
+            });
+        });
+        // Darkmode umschalten
+        const toggle = document.getElementById('dark-mode-toggle');
+
+        // Darkmode-Zustand beim Laden der Seite überprüfen und anwenden
+        const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
+        toggle.checked = darkModeEnabled;
+        if (darkModeEnabled) {
+            document.body.classList.add('dark-mode');
+        }
+
+        toggle.addEventListener('change', () => {
+            const isChecked = toggle.checked;
+            document.body.classList.toggle('dark-mode', isChecked);
+            // Speichere den Zustand in localStorage
+            localStorage.setItem('darkMode', isChecked);
+        });
+    </script>
+</body>
+</html>
diff --git a/public/wunsch.html b/public/wunsch.html
new file mode 100644
index 0000000..e3ea229
--- /dev/null
+++ b/public/wunsch.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="icon" type="image/png" href="img/Viper-plex-logo.png">
+    <title>Wunsch - Viper-Plex</title>
+</head>
+<body>
+     <!-- Logo separat einfügen -->
+     <div class="logo-container">
+        <a href="index.html">
+            <img src="img/Viper-plex-logo.png" alt="Viper-Plex Logo" class="logo">
+        </a>
+    </div>
+    <div class="welcome-box">
+        <h1>Wunsch Seite</h1>
+        <nav class="navbar">
+            <div class="navbar-container">
+                <a href="index.html" class="navbar-link">Home</a>
+                <a href="wunsch.html" class="navbar-link">Film & Serien wunsch</a>
+                <a href="anleitung.html" class="navbar-link">Anleitung</a>
+                <a href="funktionen.html" class="navbar-link">Funktionen</a>
+                <a href="faq.html" class="navbar-link">FAQs</a>
+                <a href="kontakt.html" class="navbar-link">Kontakt</a>
+                <a href="link.html" class="navbar-link">Links</a>
+                <a href="report.html" class="navbar-link">Dev-Report</a>
+                <a href="admin.html" class="navbar-link">Admin</a>
+            </div>
+        </nav>
+        <label class="switch">
+            <input type="checkbox" id="dark-mode-toggle">
+            <span class="slider"></span>
+        </label>
+    </div>
+
+    <div class="container">
+        <main>
+            <div class="wunsch-box">
+                <h2>Dein Wunsch</h2>
+                <form id="wunsch-form">
+                    <label for="wunsch">Wunsch eingeben:</label>
+                    <input type="text" id="wunsch" placeholder="Gib deinen Wunsch ein" required>
+                    <label for="type">Wunschtyp:</label>
+                    <select id="type">
+                        <option value="film">Film</option>
+                        <option value="serie">Serie</option>
+                    </select>
+                    <button type="submit">Absenden</button>
+                </form>
+                <p id="response-message"></p>
+            </div>
+        </main>
+        <aside class="sidebar">
+            <div class="gitea-box">
+                <p>Sieh dir den Code auf <a href="https://git.viper.ipv64.net/M_Viper/Plex-Telegram-Bot" target="_blank">Gitea</a> an!</p>
+                <p>Aktuelle Version: <span id="bot-version"></span></p>
+                <div class="telegram-connect-box">
+                    <p>Verbinde dich mit unserem Telegram-Bot!</p>
+                    <a id="telegram-link" href="#" target="_blank">Jetzt verbinden</a>
+                </div>
+            </div>
+        </aside>
+    </div>
+
+    <footer class="footer">
+        <p>&copy; 2024 Viper-Plex. Alle Rechte vorbehalten.</p>
+    </footer>
+
+    <script>
+        // Funktion, um die Umgebungsvariablen abzurufen
+        const fetchEnvVariables = async () => {
+            const response = await fetch('/api/env');
+            const data = await response.json();
+    
+            document.getElementById('bot-alias').textContent = data.botAlias;
+            document.getElementById('telegram-link').href = data.telegramLink;
+        };
+    
+        document.addEventListener('DOMContentLoaded', () => {
+            fetch('/api/telegram-link') // API-Endpunkt zum Abrufen des Telegram-Links
+                .then(response => response.json())
+                .then(data => {
+                    const telegramLink = document.getElementById('telegram-link');
+                    telegramLink.href = data.link; // Setze den Link im Anchor-Tag
+                })
+                .catch(error => console.error('Fehler beim Abrufen des Telegram-Links:', error));
+    
+            // Version abrufen
+            fetch('/api/bot-version')
+                .then(response => response.json())
+                .then(data => {
+                    const botVersion = document.getElementById('bot-version');
+                    botVersion.textContent = data.version; // Setze die Versionsnummer
+                })
+                .catch(error => console.error('Fehler beim Abrufen der Bot-Version:', error));
+            
+
+            // Handle form submission
+            document.getElementById('wunsch-form').addEventListener('submit', function(event) {
+                event.preventDefault();
+                const wunsch = document.getElementById('wunsch').value;
+                const type = document.getElementById('type').value;
+
+                fetch('/api/telegram-wunsch', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ wunsch, type })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('response-message').textContent = data.message;
+                })
+                .catch(error => {
+                    document.getElementById('response-message').textContent = 'Fehler beim Senden des Wunsches: ' + error;
+                });
+            });
+        });
+
+        // Darkmode umschalten
+        const toggle = document.getElementById('dark-mode-toggle');
+        const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
+        toggle.checked = darkModeEnabled;
+        if (darkModeEnabled) document.body.classList.add('dark-mode');
+
+        toggle.addEventListener('change', () => {
+            const isChecked = toggle.checked;
+            document.body.classList.toggle('dark-mode', isChecked);
+            localStorage.setItem('darkMode', isChecked);
+        });
+
+        
+    </script>
+</body>
+</html>
