diff --git a/js/customElements/blogIndex.js b/js/customElements/blogIndex.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d46573134ceb3b69f0eda4e703b928500dd21f3
--- /dev/null
+++ b/js/customElements/blogIndex.js
@@ -0,0 +1,26 @@
+class BlogIndex extends HTMLElement {
+    constructor() {
+        super();
+        let xhr = new XMLHttpRequest();
+        let ul = document.createElement("ul");
+        xhr.onreadystatechange = () => {
+            if(xhr.readyState === 4 && xhr.status === 200){
+                let blog = JSON.parse(xhr.responseText);
+                blog.forEach((element) => {
+                    this.innerHTML += `
+                    <article class="breakWord">
+                        <h2>${element["title"]}</h2>
+                        <p breakWord>${element["content"]}</p>
+                        <p class="center"><a href="/post.php?id=${element["id"]}"><button>Mehr lesen</button></a></p>
+                    </article>
+                    `;
+                });
+                this.appendChild(ul);
+            }
+        }
+        xhr.open("GET", "/API/getBlogElements.php?position=index");
+        xhr.send();
+    }
+}
+
+customElements.define("jl-blog_index", BlogIndex);
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 59464409b706d75a3ff7f25cdb6179222b38b662..a10a207e13b7cb7f9d57536a60e977ba88f52cc1 100644
--- a/js/script.js
+++ b/js/script.js
@@ -7,4 +7,5 @@ require("./ntpMenu");
 
 require("./customElements/cookie");
 require("./customElements/svgLoader");
-require("./customElements/blogFooter");
\ No newline at end of file
+require("./customElements/blogFooter");
+require("./customElements/blogIndex");
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index 9a06a506977b492a31309cc6078a262a98e4e6ce..2cc6ab0d57b6c4a683187f21c2e4771212af3ad8 100644
--- a/public/index.php
+++ b/public/index.php
@@ -21,33 +21,7 @@ getHeader("Jonas Leder", "home");
         <div class="spacer"></div>
 
         <h2>Blog</h2>
-        <div id="blog">
-            <?php
-            $result = $conn->query("SELECT * FROM posts order by id desc limit $homeMaxPost");
-            if ($result->num_rows > 0) {
-                while($row = $result->fetch_assoc()) {
-                    $title = $row["title"];
-                    $id = $row["id"];
-                    $content = explode(" ", $row["content"]);
-                    $contentNew = "";
-                    if(count($content) > 800){
-                        $temp = str_split($content, 800);
-                        $contentNew = $temp[0];
-                        $contentNew = $content . explode(" ", $temp[1])[0] . " ...";
-                    } else {
-                        $contentNew = $row["content"];
-                    }
-                    echo(<<<EOF
-            <article class="breakWord">
-                <h2>$title</h2>
-                <p breakWord>$contentNew</p>
-                <p class="center"><a href="/post.php?id=$id"><button>Mehr lesen</button></a></p>
-            </article>
-            EOF);
-                }
-            }
-            ?>
-        </div>
+        <jl-blog_index id="blog"></jl-blog_index>
         <div id="banner">
         <h2>Banner</h2>
         <a target="_blank" href="https://ipv6.he.net"><img src="<?php echo($heIMG); ?>" data-noPreview="true"></a>