diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..c332fda
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kino Nacht Inhaltsverzeichnis</title>
+    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="icon" type="image/jpeg" href="img/favicon.jpg">
+</head>
+
+<body>
+    <h1>Kino Nacht Inhaltsverzeichnis</h1>
+
+    <div class="container">
+        <!-- Tabs -->
+        <div class="tabs">
+            <div class="tab active" data-category="film">🎬 Film</div>
+            <div class="tab" data-category="serien">📺 Serien</div>
+            <div class="tab" data-category="anime">📖 Anime</div>
+            <div class="tab" data-category="kinderfilme">🧸 Kinderfilme</div>
+            <div class="tab" data-category="animeSerien">🍥 Anime-Serien</div> <!-- Neue Kategorie -->
+            <div class="tab" data-category="jahreszeitenZauber">🌸 Jahreszeiten-Zauber</div> <!-- Neue Kategorie -->
+        </div>
+
+        <!-- Inhalt -->
+        <div class="content active" id="filmContent">
+            <div id="filmList"></div>
+        </div>
+        <div class="content" id="serienContent">
+            <div id="serienList"></div>
+        </div>
+        <div class="content" id="animeContent">
+            <div id="animeList"></div>
+        </div>
+        <div class="content" id="kinderfilmeContent">
+            <div id="kinderfilmeList"></div>
+        </div>
+        <div class="content" id="animeSerienContent">
+            <div id="animeSerienList"></div>
+        </div>
+        <div class="content" id="jahreszeitenZauberContent">
+            <div id="jahreszeitenZauberList"></div>
+        </div>
+    </div>
+
+    <!-- Suche Widget -->
+    <div class="search-widget">
+        <h3>Suche Alle Kategorien</h3>
+        <input type="text" id="globalSearch" placeholder="Suche nach Film, Serie, Anime oder Kinderfilm...">
+    </div>
+
+    <!-- Widget für Link zu einem anderen Bot -->
+    <div class="bot-widget">
+        <a href="https://kino.viper.ipv64.net" target="_blank">
+            <div class="widget-content">
+                <h3>Der Film nicht gefunden?</h3>
+                <p>Kein Problem! Gehe zu unserem Wunsch-Bot und fordere den Film an.</p>
+                <button class="widget-button">Zum Wunsch-Bot</button>
+            </div>
+        </a>
+    </div>
+
+    <!-- Footer -->
+    <footer>
+        <p>&copy; 2024 Kino Nacht. Alle Rechte vorbehalten.</p>
+        <p><a href="https://kino.viper.ipv64.net">Wunsch Bot</a> | <a href="https://t.me/KinoNacht">Telegram Gruppe</a></p>
+    </footer>
+
+    <!-- JavaScript -->
+    <script>
+       let categories = {
+    film: [],
+    serien: [],
+    anime: [],
+    kinderfilme: [],
+    animeSerien: [], // Neue Kategorie
+    jahreszeitenZauber: [] // Neue Kategorie
+};
+
+let currentPage = 0;
+const itemsPerPage = 8; // Maximale Einträge pro Seite
+
+// Abrufen der Kategorien vom Server
+async function loadCategories() {
+    try {
+        const response = await fetch('/api/categories');
+        const data = await response.json();
+        console.log(data); // Überprüfen, ob die Daten korrekt geladen werden
+
+        categories.film = data.film;
+        categories.serien = data.serien;
+        categories.anime = data.anime;
+        categories.kinderfilme = data.kinderfilme;
+        categories.animeSerien = data.animeSerien;
+        categories.jahreszeitenZauber = data.jahreszeitenZauber;
+
+        createCategoryContent(data.film, 'filmList');
+        createCategoryContent(data.serien, 'serienList');
+        createCategoryContent(data.anime, 'animeList');
+        createCategoryContent(data.kinderfilme, 'kinderfilmeList');
+        createCategoryContent(data.animeSerien, 'animeSerienList');
+        createCategoryContent(data.jahreszeitenZauber, 'jahreszeitenZauberList');
+    } catch (err) {
+        console.error('Fehler beim Laden der Kategorien:', err);
+    }
+}
+
+// Funktion zum Erstellen der Listen für die Kategorien
+function createCategoryContent(categoryData, containerId) {
+    const container = document.getElementById(containerId);
+    container.innerHTML = ''; // Leeren des Containers
+
+    const totalPages = Math.ceil(categoryData.length / itemsPerPage);
+    const startIndex = currentPage * itemsPerPage;
+    const endIndex = Math.min(startIndex + itemsPerPage, categoryData.length);
+    
+    const pageData = categoryData.slice(startIndex, endIndex);
+    
+    pageData.forEach(item => {
+        const card = document.createElement('div');
+        card.classList.add('card');
+        card.setAttribute('data-topic', item.topic.toLowerCase());
+
+        const title = document.createElement('h3');
+        title.textContent = item.topic;
+
+        const link = document.createElement('a');
+        link.href = item.link;
+        link.target = '_blank';
+        link.textContent = 'Zum Film';
+
+        card.appendChild(title);
+        card.appendChild(link);
+        container.appendChild(card);
+    });
+
+    // Navigation Buttons
+    const nav = document.createElement('div');
+    nav.classList.add('navigation');
+
+    if (currentPage > 0) {
+        const prevButton = document.createElement('button');
+        prevButton.textContent = 'Vorherige Seite';
+        prevButton.addEventListener('click', () => {
+            currentPage--;
+            createCategoryContent(categoryData, containerId);
+        });
+        nav.appendChild(prevButton);
+    }
+
+    // Seitenzahlen anzeigen
+    const pageNumbers = document.createElement('span');
+    pageNumbers.classList.add('page-numbers');
+    pageNumbers.textContent = `Seite ${currentPage + 1} von ${totalPages}`;
+    nav.appendChild(pageNumbers);
+
+    if (currentPage < totalPages - 1) {
+        const nextButton = document.createElement('button');
+        nextButton.textContent = 'Nächste Seite';
+        nextButton.addEventListener('click', () => {
+            currentPage++;
+            createCategoryContent(categoryData, containerId);
+        });
+        nav.appendChild(nextButton);
+    }
+
+    container.appendChild(nav);
+}
+
+// Funktion zum Umschalten der Tabs
+const tabs = document.querySelectorAll('.tab');
+const contents = document.querySelectorAll('.content');
+
+tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+        tabs.forEach(t => t.classList.remove('active'));
+        contents.forEach(c => c.classList.remove('active'));
+
+        tab.classList.add('active');
+        const category = tab.getAttribute('data-category');
+        document.getElementById(category + 'Content').classList.add('active');
+    });
+});
+
+// Funktion für die globale Suche
+document.getElementById('globalSearch').addEventListener('input', function (event) {
+    const query = event.target.value.toLowerCase();
+
+    // Alle Inhalte durchgehen und filtern
+    filterContent('filmList', query);
+    filterContent('serienList', query);
+    filterContent('animeList', query);
+    filterContent('kinderfilmeList', query);
+    filterContent('animeSerienList', query); // Neue Kategorie
+    filterContent('jahreszeitenZauberList', query); // Neue Kategorie
+});
+
+// Funktion um die Inhalte zu filtern
+function filterContent(containerId, query) {
+    const container = document.getElementById(containerId);
+    const items = container.getElementsByClassName('card');
+
+    Array.from(items).forEach(item => {
+        const topic = item.getAttribute('data-topic');
+        if (topic.includes(query)) {
+            item.style.display = ''; // Sichtbar machen
+        } else {
+            item.style.display = 'none'; // Ausblenden
+        }
+    });
+}
+
+// Initialisiere die Kategorien beim Laden der Seite
+window.onload = loadCategories;
+
+    </script>
+</body>
+</html>
