diff --git a/.gitignore b/.gitignore
index e34d398db5d256c6333e51cc9381b072a2429d4d..51f550eac17ad17a0540528ad25501312ccea648 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 #config file
 public/internal/config.php
+public/API/config.phpconfig
 
 #phpstorm
 .idea/
diff --git a/js/customElements/blogFooter.js b/js/customElements/blogFooter.js
new file mode 100644
index 0000000000000000000000000000000000000000..26e270533a0b421d2ac4937c8e139c10efa8f7fd
--- /dev/null
+++ b/js/customElements/blogFooter.js
@@ -0,0 +1,26 @@
+class blogFooter extends HTMLElement {
+    constructor(){
+        super();
+        console.log("initializing footer");
+        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) => {
+                    let li = document.createElement("li");
+                    let a = document.createElement("a");
+                    a.href = "/post.php?id=" + element["id"];
+                    a.innerText = element["title"];
+                    li.appendChild(a);
+                    ul.appendChild(li);
+                });
+                this.appendChild(ul);
+            }
+        }
+        xhr.open("GET", "/API/getBlogElements.php?position=footer");
+        xhr.send();
+    }
+}
+
+customElements.define("jl-footer_blog", blogFooter);
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 5670e802b132c4f812d0a1e3bf7563e09d45079c..59464409b706d75a3ff7f25cdb6179222b38b662 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,8 +1,10 @@
-require("./customElements/cookie");
 require("./burgerMenu");
 require("./error");
 require("./imgPreview");
 require("./includeHTML");
 require("./ntpGraph");
 require("./ntpMenu");
-require("./customElements/svgLoader");
\ No newline at end of file
+
+require("./customElements/cookie");
+require("./customElements/svgLoader");
+require("./customElements/blogFooter");
\ No newline at end of file
diff --git a/public/API/config.php b/public/API/config.php
new file mode 100644
index 0000000000000000000000000000000000000000..10b2400714b702e491195a8db6f192431ee9f6b3
--- /dev/null
+++ b/public/API/config.php
@@ -0,0 +1,16 @@
+<?php
+$mysqlServer = "localhost";
+$mysqlUser = "root";
+$mysqlPassword = "password";
+$mysqlDatabase = "website";
+
+$contactmail = "m6LCSL4haTk7z4ZrgqQn8X@jonasled.de";
+
+//Hcaptcha:
+$sitekey = "10000000-ffff-ffff-ffff-000000000001";
+$secretkey = "0x0000000000000000000000000000000000000000";
+
+$footerMaxPost = 5;
+$homeMaxPost = 3;
+
+$trackURL = "https://matomo.jonasled.de/matomo.php?idsite=1&amp;rec=1";
diff --git a/public/API/getBlogElements.php b/public/API/getBlogElements.php
new file mode 100644
index 0000000000000000000000000000000000000000..d9b7a8153ae8e79f9e988b51a47a8c30075e508d
--- /dev/null
+++ b/public/API/getBlogElements.php
@@ -0,0 +1,29 @@
+<?php
+include "config.php";
+include "mysql.php";
+
+$position = $_GET['position'];
+
+if($position == "index"){
+    $limit = $homeMaxPost;
+} else if($position == "footer"){
+    $limit = $footerMaxPost;
+} else {
+    die("wrong parameter");
+}
+$responseJSON = [];
+
+$result = $conn->query("SELECT * FROM posts order by id desc limit $limit");
+if ($result->num_rows > 0) {
+    while ($row = $result->fetch_assoc()) {
+        $blogElement = [
+            "title" => $row["title"],
+            "id" => $row["id"],
+            "content" => $row["content"]
+        ];
+
+        array_push($responseJSON, $blogElement);
+    }
+}
+header('Content-Type: application/json');
+echo json_encode($responseJSON);
\ No newline at end of file
diff --git a/public/API/mysql.php b/public/API/mysql.php
new file mode 100644
index 0000000000000000000000000000000000000000..5c1d19b9565e338f9ad1b2864577e9b57abea78c
--- /dev/null
+++ b/public/API/mysql.php
@@ -0,0 +1,11 @@
+<?php
+include "config.php";
+
+$conn = new mysqli($mysqlServer, $mysqlUser, $mysqlPassword, $mysqlDatabase);
+// Check connection
+if ($conn->connect_error) {
+    include "500.php";
+
+    header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
+    die(getError500());
+}
diff --git a/public/internal/footer.php b/public/internal/footer.php
index 6ded4594945efbdeee5036496346a9e9fa53bd55..f0fee0cf427492ab9ec6dd90ecfdd10a6f193c09 100644
--- a/public/internal/footer.php
+++ b/public/internal/footer.php
@@ -29,9 +29,7 @@ function getFooter(){
     </div>
     <div id="newestPost">
         <h3>Neueste Beitr&auml;ge:</h3>
-        <ul>
-            $newestPost
-        </ul>
+        <jl-footer_blog></jl-footer_blog>
     </div>
     <div class="center">
         <p class="center">