diff --git a/images.json b/images.json
new file mode 100644
index 0000000..a28c73e
--- /dev/null
+++ b/images.json
@@ -0,0 +1,114 @@
+[
+  {
+    "filename": "3cd96957d13bc14e9d6c47a972d7ca2b.jpg",
+    "url": "https://chan.sankakucomplex.com/post/show/5770720"
+  },
+  {
+    "filename": "4fb55b8507743b41538f97e92d9def8f.gif",
+    "url": "https://chan.sankakucomplex.com/post/show/1568530"
+  },
+  {
+    "filename": "6f8d095aca339fe60b90598a05655aca.jpg",
+    "url": "https://chan.sankakucomplex.com/post/show/5772819"
+  },
+  {
+    "filename": "85b856e658f55d5d204d66064c4d49051250230828_large.jpg",
+    "url": "http://www.crunchyroll.com/library/Riko_Suminoe/"
+  },
+  {
+    "filename": "87dcb49c41631974338c5c05ea16b5e4.jpg",
+    "url": "https://chan.sankakucomplex.com/post/show/5772776"
+  },
+  {
+    "filename": "515d1548-791e-4bd1-b624-c9f570b06a1c_details_big.jpeg",
+    "url": "https://addons.opera.com/de/themes/details/riko-suminoe/"
+  },
+  {
+    "filename": "7426e9b2061df290341acae3b8d35966.jpg",
+    "url": "https://chan.sankakucomplex.com/post/show/6164540"
+  },
+  {
+    "filename": "20004a72668b5cfb9929980139d1cfbe.jpg",
+    "url": "https://chan.sankakucomplex.com/post/show/5772825"
+  },
+  {
+    "filename": "26705.jpg",
+    "url": "http://www.nyusu.fm/es/ranking/2443/ako-vs-riko"
+  },
+  {
+    "filename": "84282.jpg",
+    "url": "https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/"
+  },
+  {
+    "filename": "101775.jpg",
+    "url": "https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/"
+  },
+  {
+    "filename": "103228.jpg",
+    "url": "https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/"
+  },
+  {
+    "filename": "573485-riko_suminoe__profile_portrait__large.png",
+    "url": "http://www.animevice.com/riko-suminoe/18-18154/forums/"
+  },
+  {
+    "filename": "3369691647_41165d2ce5.jpg",
+    "url": "http://www.forumla.de/f-anime-manga-221/t-bewerte-den-anime-charakter-ueber-dir-206388/page16#post4316715"
+  },
+  {
+    "filename": "4180795298_5b588bd66d.jpg",
+    "url": "http://forums.bakabt.me/index.php?topic=29841.msg4609326#msg4609326"
+  },
+  {
+    "filename": "6343259033_35bdb68f68.jpg",
+    "url": "http://myanimelist.net/forum/?topicid=480369&show=180#msg20323187"
+  },
+  {
+    "filename": "adfe30ec-16fe-4c05-b7ef-2ac89dac64a2_details_big.jpeg",
+    "url": "https://addons.opera.com/de/themes/details/riko-suminoe/"
+  },
+  {
+    "filename": "cb4f20a6ae59ac058fd07d647b79ecc7d2308c48.png",
+    "url": "https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/"
+  },
+  {
+    "filename": "dc2c23a0d2f26.jpg",
+    "url": "http://www.fairy-tail-pbf.pun.pl/viewtopic.php?pid=9077#p9077"
+  },
+  {
+    "filename": "japan_school_uniforms_japanese_1920x1080_knowledgehi.com.jpg",
+    "url": "http://www.knowledgehi.com/Countries/Japan/japan_school_uniforms_japanese_comedy_kiss_x_sis_anime_harem_anime_girls_suminoe_ako_suminoe_riko_bo_42785/download_1920x1080"
+  },
+  {
+    "filename": "kiss_x_sis___riko_suminoe_tag_by_braedesigns-d6m5suo.png",
+    "url": "http://braedesigns.deviantart.com/art/Kiss-x-Sis-Riko-Suminoe-Tag-400019280"
+  },
+  {
+    "filename": "kissxsis_01.jpg",
+    "url": "http://www.emptyblue.it/image.aspx?alt=KissXSis&url=http://www.emptyblue.it/data/wallpaper/KissXSis/kissxsis_01.jpg&dummy=1"
+  },
+  {
+    "filename": "riko.jpg",
+    "url": "https://thebutterflyboy.wordpress.com/2011/08/31/kiss-x-sis/"
+  },
+  {
+    "filename": "rikob.jpg",
+    "url": "http://forums.bakabt.me/index.php?topic=29841.msg4609382#msg4609382"
+  },
+  {
+    "filename": "Suminoe.Riko.full.193801.jpg",
+    "url": "http://www.zerochan.net/193801"
+  },
+  {
+    "filename": "Suminoe.Riko.full.239425.jpg",
+    "url": "http://www.zerochan.net/239425"
+  },
+  {
+    "filename": "Suminoe.Riko.full.713535.jpg",
+    "url": "http://www.zerochan.net/713535"
+  },
+  {
+    "filename": "tumblr_n47jqpdOCi1smmytpo1_400.gif",
+    "url": "http://wifflegif.com/gifs/515729-riko-suminoe-kiss-x-sis-gif"
+  }
+] 
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f336fc9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,353 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Riko.moe</title>
+    <link rel="shortcut icon" href="favicon.ico">
+    
+    <!-- Open Graph Tags -->
+    <meta property="og:title" content="Riko.moe">
+    <meta property="og:description" content="Zufällige Bilder von Riko Suminoe">
+    <meta property="og:image" content="https://riko.moe/images/riko.jpg">
+    <meta property="og:url" content="https://riko.moe">
+    <meta property="og:type" content="website">
+    
+    <!-- Analytics Script -->
+    <script defer src="https://stats.ponywave.de/script.js" data-website-id="8a75dd9e-79e9-419f-971a-fd6d819ba537"></script>
+    
+    <style>
+        /* Basis-Styling aus style.css */
+        body { 
+            font: 14px/1.3 verdana, arial, helvetica, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f5f5f5;
+            color: #333;
+            min-height: 100vh;
+            position: relative;
+        }
+        h1 { font-size: 1.5em; margin-top: 20px; }
+        h2 { font-size: 1.2em; }
+        a:link { color: #33c; text-decoration: none; } 
+        a:visited { color: #339; }
+        a:hover { text-decoration: underline; }
+        p { max-width: 60em; }
+        a img { border: none; }
+        .pic-center { text-align: center; margin: 20px 0; }
+        .text-center { text-align: center; }
+
+        /* Container für den Hauptinhalt */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        /* Button-Styling */
+        .btn {
+            display: inline-block;
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s;
+        }
+        .btn:hover {
+            background-color: #45a049;
+        }
+
+        /* Modal-Styling */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0, 0, 0, 0.9);
+        }
+        .modal-content {
+            margin: auto;
+            display: block;
+            max-width: 90%;
+            max-height: 90%;
+        }
+        .close {
+            position: absolute;
+            top: 15px;
+            right: 35px;
+            color: #f1f1f1;
+            font-size: 40px;
+            font-weight: bold;
+            transition: 0.3s;
+            cursor: pointer;
+        }
+        .close:hover {
+            color: #bbb;
+        }
+
+        /* Spoiler/Accordion für Sources */
+        .spoiler {
+            background-color: #eee;
+            color: #444;
+            cursor: pointer;
+            padding: 18px;
+            width: 100%;
+            border: none;
+            text-align: left;
+            outline: none;
+            font-size: 15px;
+            transition: 0.4s;
+            border-radius: 4px;
+            margin-bottom: 10px;
+        }
+        .active, .spoiler:hover {
+            background-color: #ccc;
+        }
+        .panel {
+            padding: 0 18px;
+            background-color: white;
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.2s ease-out;
+            border-radius: 0 0 4px 4px;
+        }
+        .panel ol {
+            padding: 20px 40px;
+        }
+
+        /* Footer-Styling */
+        footer {
+            background-color: #333;
+            color: white;
+            text-align: center;
+            padding: 15px;
+            border-top: 5px solid #4CAF50;
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        footer a {
+            color: #b8ffbe; /* Hellere Farbe für bessere Lesbarkeit */
+            margin: 0 10px;
+            text-decoration: none;
+        }
+        footer a:hover {
+            text-decoration: underline;
+            color: white;
+        }
+        
+        /* Responsive Anpassungen */
+        @media screen and (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            .modal-content {
+                max-width: 100%;
+            }
+            body {
+                padding-bottom: 120px; /* Angepasster Platz für den Footer auf mobilen Geräten */
+            }
+        }
+        
+        /* Bild-Thumbnail */
+        .thumbnail {
+            cursor: pointer;
+            height: 400px; /* Fixe Höhe für das Bild */
+            width: auto;
+            object-fit: contain; /* Behält das Seitenverhältnis bei */
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            transition: transform 0.3s;
+        }
+        .thumbnail:hover {
+            transform: scale(1.02);
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="text-center">
+            <h1>Riko.moe</h1>
+            <p style="font-size: x-large;">Klicke auf das Bild, um es zu vergrößern</p>
+        </div>
+        
+        <!-- Bild-Container -->
+        <div class="pic-center">
+            <img id="randomImage" class="thumbnail" alt="Cute Riko <3" onclick="openModal()">
+        </div>
+        
+        <div class="text-center" style="margin: 20px 0;">
+            <button class="btn" onclick="loadRandomImage()">Neues zufälliges Bild laden</button>
+        </div>
+        
+        <!-- Sources Spoiler -->
+        <button class="spoiler">Quellen anzeigen</button>
+        <div class="panel">
+            <ol id="sourcesList">
+                <!-- Quellen werden dynamisch aus der JSON-Datei geladen -->
+            </ol>
+        </div>
+    </div>
+
+    <!-- Modal für Bildvergrößerung -->
+    <div id="imageModal" class="modal">
+        <span class="close" onclick="closeModal()">&times;</span>
+        <img class="modal-content" id="modalImage">
+    </div>
+
+    <!-- Footer -->
+    <footer>
+        <div>
+            <a href="#" onclick="toggleSources(); return false;">Quellen</a> | 
+            <a href="riko.zip">Alle Bilder herunterladen</a> | 
+            <a href="https://yagyuu.moe" target="_blank">Yagyuu.moe</a> | 
+            <a href="mailto:kontakt@yagyuu.de?subject=[Riko.moe]">Kontakt</a>
+        </div>
+        <div style="margin-top: 10px; font-size: 0.8em;">
+            &copy; <span id="currentYear"></span> Riko.moe - Mit ♥ erstellt
+        </div>
+    </footer>
+
+    <script>
+        // Pfad zum Bilderordner
+        const imagePath = "images/";
+        let images = []; // Liste der Bilddateien
+        
+        // Funktion zum Laden der Bilderliste aus der JSON-Datei
+        function loadImageList() {
+            fetch('images.json')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Netzwerkantwort war nicht ok');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    // Extrahiere die Dateinamen aus den JSON-Einträgen
+                    images = data.map(entry => entry.filename);
+                    
+                    // Lade ein zufälliges Bild, nachdem die Liste geladen wurde
+                    loadRandomImage();
+                    
+                    // Lade die Quellen
+                    loadSources(data);
+                })
+                .catch(error => {
+                    console.error('Problem beim Laden der Bilderliste:', error);
+                    // Fallback zu einem Standardbild, falls die Liste nicht geladen werden kann
+                    const imgElement = document.getElementById("randomImage");
+                    imgElement.src = imagePath + "riko.jpg";
+                    imgElement.style.display = "inline-block";
+                });
+        }
+        
+        // Funktion zum Laden der Quellen
+        function loadSources(data) {
+            const sourcesList = document.getElementById("sourcesList");
+            sourcesList.innerHTML = ''; // Leere die Liste
+            
+            // Sortiere die Einträge nach Dateinamen
+            data.sort((a, b) => a.filename.localeCompare(b.filename));
+            
+            // Füge jeden Eintrag zur Liste hinzu
+            data.forEach(entry => {
+                const listItem = document.createElement('li');
+                if (entry.url) {
+                    const link = document.createElement('a');
+                    link.href = entry.url;
+                    link.target = "_blank";
+                    link.textContent = entry.filename;
+                    listItem.appendChild(link);
+                } else {
+                    // Wenn keine URL vorhanden ist, zeige nur den Dateinamen
+                    listItem.textContent = entry.filename;
+                }
+                sourcesList.appendChild(listItem);
+            });
+        }
+        
+        // Funktion zum Laden eines zufälligen Bildes
+        function loadRandomImage() {
+            if (images.length === 0) {
+                console.error('Keine Bilder in der Liste');
+                return;
+            }
+            
+            const randomIndex = Math.floor(Math.random() * images.length);
+            const randomImage = images[randomIndex];
+            const imgElement = document.getElementById("randomImage");
+            imgElement.src = imagePath + randomImage;
+            
+            // Stellen Sie sicher, dass das Bild geladen ist, bevor Sie es anzeigen
+            imgElement.onload = function() {
+                imgElement.style.display = "inline-block";
+            };
+        }
+        
+        // Modal-Funktionen
+        function openModal() {
+            const modal = document.getElementById("imageModal");
+            const img = document.getElementById("randomImage");
+            const modalImg = document.getElementById("modalImage");
+            
+            modal.style.display = "block";
+            modalImg.src = img.src;
+        }
+        
+        function closeModal() {
+            const modal = document.getElementById("imageModal");
+            modal.style.display = "none";
+        }
+        
+        // Spoiler/Accordion-Funktion
+        document.addEventListener("DOMContentLoaded", function() {
+            const acc = document.getElementsByClassName("spoiler");
+            
+            for (let i = 0; i < acc.length; i++) {
+                acc[i].addEventListener("click", function() {
+                    this.classList.toggle("active");
+                    const panel = this.nextElementSibling;
+                    
+                    if (panel.style.maxHeight) {
+                        panel.style.maxHeight = null;
+                    } else {
+                        panel.style.maxHeight = panel.scrollHeight + "px";
+                    }
+                });
+            }
+            
+            // Aktuelles Jahr für das Copyright setzen
+            document.getElementById("currentYear").textContent = new Date().getFullYear();
+            
+            // Lade die Bilderliste beim Seitenstart
+            loadImageList();
+        });
+        
+        // Funktion zum Umschalten der Sources über den Footer-Link
+        function toggleSources() {
+            const spoiler = document.querySelector(".spoiler");
+            spoiler.click();
+            
+            // Scrolle zu den Sources
+            spoiler.scrollIntoView({ behavior: "smooth" });
+        }
+        
+        // Schließe das Modal, wenn außerhalb geklickt wird
+        window.onclick = function(event) {
+            const modal = document.getElementById("imageModal");
+            if (event.target == modal) {
+                closeModal();
+            }
+        };
+    </script>
+</body>
+</html> 
\ No newline at end of file
diff --git a/index.php b/index.php
deleted file mode 100644
index cddd245..0000000
--- a/index.php
+++ /dev/null
@@ -1,55 +0,0 @@
-<?php
-// Indicate the location of your images 
-$root = '';
-// use if specifying path from root
-//$root = $_SERVER['DOCUMENT_ROOT'];
-
-$path = 'images/';
- 
-function getImagesFromDir($path) {
-  $images = array();
-  if ( $img_dir = @opendir($path) ) {
-    while ( false !== ($img_file = readdir($img_dir)) ) {
-      // checks for gif, jpg, png and jpeg
-      if ( preg_match("/(\.gif|\.jpg|\.png\.jpeg)$/", $img_file) ) {
-        $images[] = $img_file;
-      }
-    }
-    closedir($img_dir);
-  }
-  return $images;
-}
-
-function getRandomFromArray($ar) {
-  mt_srand( (double)microtime() * 1000000 ); // php 4.2+ not needed
-  $num = array_rand($ar);
-  return $ar[$num];
-}
-
-// Obtain list of images from directory 
-$imgList = getImagesFromDir($root . $path);
-$img = getRandomFromArray($imgList);
-
-?> 
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Riko.moe</title>
-    <link rel="stylesheet" href="style.css">
-    <link rel="shortcut icon" href="favicon.ico" />
-  </head>
-
-  <body>
-	<div class="text-center"><p style="font-size:xx-large;">Press F5 for another pic!</p></div>
-  <!-- image displays here -->
-  <div class="pic-center">
-    <img src="<?php echo $path . $img ?>" height="700" alt="Cute Riko <3" />
-  </div>
-  </body>
-	
-  <!-- Footer begins -->
-  <a href="sources.php">Sources</a> | <a href="riko.zip">Download all pictures</a> | <a href="https://yagyuu.moe" target="_blank">Yagyuu.moe</a> | <a href="mailto:miku2000@outlook.de?subject=[Riko.moe]">Mail me</a>
-  <!-- Footer ends -->
-
-</html>
diff --git a/sources.php b/sources.php
deleted file mode 100644
index 5ec713f..0000000
--- a/sources.php
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Riko.moe | Image Sources</title>
-    <link rel="stylesheet" href="style.css">
-    <link rel="shortcut icon" href="favicon.ico" />
-  </head>
-  <body>
-
-    <ol>
-      <li><a href="https://chan.sankakucomplex.com/post/show/5770720" target="_blank">3cd96957d13bc14e9d6c47a972d7ca2b.jpg</a></li>
-      <li><a href="https://chan.sankakucomplex.com/post/show/1568530" target="_blank">4fb55b8507743b41538f97e92d9def8f.gif</a></li>
-      <li><a href="https://chan.sankakucomplex.com/post/show/5772819" target="_blank">6f8d095aca339fe60b90598a05655aca.jpg</a></li>
-      <li><a href="http://www.crunchyroll.com/library/Riko_Suminoe/" target="_blank">85b856e658f55d5d204d66064c4d49051250230828_large.jpg</a></li>
-      <li><a href="https://chan.sankakucomplex.com/post/show/5772776" target="_blank">87dcb49c41631974338c5c05ea16b5e4.jpg</a></li>
-      <li><a href="https://addons.opera.com/de/themes/details/riko-suminoe/" target="_blank">515d1548-791e-4bd1-b624-c9f570b06a1c_details_big.jpeg</a></li>
-      <li><a href="https://chan.sankakucomplex.com/post/show/6164540" target="_blank">7426e9b2061df290341acae3b8d35966.jpg</a></li>
-      <li><a href="https://chan.sankakucomplex.com/post/show/5772825" target="_blank">20004a72668b5cfb9929980139d1cfbe.jpg</a></li>
-      <li><a href="http://www.nyusu.fm/es/ranking/2443/ako-vs-riko" target="_blank">26705.jpg</a></li>
-      <li><a href="https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/" target="_blank">84282.jpg</a></li>
-      <li><a href="https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/" target="_blank">101775.jpg</a></li>
-      <li><a href="https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/" target="_blank">103228.jpg</a></li>
-      <li><a href="http://www.animevice.com/riko-suminoe/18-18154/forums/" target="_blank">573485-riko_suminoe__profile_portrait__large.png</a></li>
-      <li><a href="http://www.forumla.de/f-anime-manga-221/t-bewerte-den-anime-charakter-ueber-dir-206388/page16#post4316715" target="_blank">3369691647_41165d2ce5.jpg</a></li>
-      <li><a href="http://forums.bakabt.me/index.php?topic=29841.msg4609326#msg4609326" target="_blank">4180795298_5b588bd66d.jpg</a></li>
-      <li><a href="http://myanimelist.net/forum/?topicid=480369&show=180#msg20323187" target="_blank">6343259033_35bdb68f68.jpg</a></li>
-      <li><a href="https://addons.opera.com/de/themes/details/riko-suminoe/" target="_blank">adfe30ec-16fe-4c05-b7ef-2ac89dac64a2_details_big.jpeg</a></li>
-      <li><a href="https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/" target="_blank">cb4f20a6ae59ac058fd07d647b79ecc7d2308c48.png</a></li>
-      <li><a href="http://www.fairy-tail-pbf.pun.pl/viewtopic.php?pid=9077#p9077" target="_blank">dc2c23a0d2f26.jpg</a></li>
-      <li><a href="http://www.knowledgehi.com/Countries/Japan/japan_school_uniforms_japanese_comedy_kiss_x_sis_anime_harem_anime_girls_suminoe_ako_suminoe_riko_bo_42785/download_1920x1080" target="_blank">japan_school_uniforms_japanese_1920x1080_knowledgehi.com.jpg</a></li>
-      <li><a href="http://braedesigns.deviantart.com/art/Kiss-x-Sis-Riko-Suminoe-Tag-400019280" target="_blank">kiss_x_sis___riko_suminoe_tag_by_braedesigns-d6m5suo.png</a></li>
-      <li><a href="http://www.emptyblue.it/image.aspx?alt=KissXSis&url=http://www.emptyblue.it/data/wallpaper/KissXSis/kissxsis_01.jpg&dummy=1" target="_blank">kissxsis_01.jpg</a></li>
-      <li><a href="https://thebutterflyboy.wordpress.com/2011/08/31/kiss-x-sis/" target="_blank">riko.jpg</a></li>
-      <li><a href="http://forums.bakabt.me/index.php?topic=29841.msg4609382#msg4609382" target="_blank">rikob.jpg</a></li>
-      <li><a href="http://www.zerochan.net/193801" target="_blank">Suminoe.Riko.full.193801.jpg</a></li>
-      <li><a href="http://www.zerochan.net/239425" target="_blank">Suminoe.Riko.full.239425.jpg</a></li>
-      <li><a href="http://www.zerochan.net/713535" target="_blank">Suminoe.Riko.full.713535.jpg</a></li>
-      <li><a href="http://wifflegif.com/gifs/515729-riko-suminoe-kiss-x-sis-gif" target="_blank">tumblr_n47jqpdOCi1smmytpo1_400.gif</a></li>
-    </ol>
-
-<p><a href="https://riko.moe/">Back</a>...</p>
-
-  </body>
-</html>
diff --git a/style.css b/style.css
deleted file mode 100644
index d4af786..0000000
--- a/style.css
+++ /dev/null
@@ -1,12 +0,0 @@
-body { font: 14px/1.3 verdana, arial, helvetica, sans-serif; }
-h1 { font-size:1.3em; }
-h2 { font-size:1.2em; }
-a:link { color:#33c; } 
-a:visited { color:#339; }
-p { max-width: 60em; }
-
-/* so linked image won't have border */
-a img { border:none; }
-
-.pic-center { text-align: center; }
-.text-center {text-align: center;}
\ No newline at end of file