diff --git a/.gitignore b/.gitignore
index 51f550eac17ad17a0540528ad25501312ccea648..3a07754d3895be885f33f49ffbb1924195b57b12 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
 #config file
 public/internal/config.php
-public/API/config.phpconfig
+public/API/lib/config.php
 
 #phpstorm
 .idea/
diff --git a/js/customElements/commentsDisplay.js b/js/customElements/commentsDisplay.js
new file mode 100644
index 0000000000000000000000000000000000000000..3cf94e246b2e630bc5136d8765e9644ca43c5e58
--- /dev/null
+++ b/js/customElements/commentsDisplay.js
@@ -0,0 +1,30 @@
+class commentsDisplay extends HTMLElement {
+    constructor() {
+        super();
+        let path = window.location.pathname;
+        let pageName = path.split("/").pop();
+        pageName = pageName.split(".")[0]
+
+        let xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState === 4 && xhr.status === 200){
+                let comments = JSON.parse(xhr.responseText);
+                comments.forEach((element) => {
+                    this.innerHTML += `
+                        <h3 class="commentTitle">${element["name"]}</h3>
+                        <div class="comment">
+                            <img src="${element["gravatarURL"]}">
+                            <article class="commentArticle">
+                                <p class="commentText">${element["comment"]}</p>
+                            </article>
+                        </div>
+                    `;
+                });
+            }
+        }
+        xhr.open("GET", "/API/projectComments.php?article=" + pageName);
+        xhr.send();
+    }
+}
+
+customElements.define("jl-comments_display", commentsDisplay);
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index a10a207e13b7cb7f9d57536a60e977ba88f52cc1..3989a8cc5769a56cee9267fedfb8056ed0809bd7 100644
--- a/js/script.js
+++ b/js/script.js
@@ -8,4 +8,5 @@ require("./ntpMenu");
 require("./customElements/cookie");
 require("./customElements/svgLoader");
 require("./customElements/blogFooter");
-require("./customElements/blogIndex");
\ No newline at end of file
+require("./customElements/blogIndex");
+require("./customElements/commentsDisplay");
\ No newline at end of file
diff --git a/public/API/getBlogElements.php b/public/API/getBlogElements.php
index d9b7a8153ae8e79f9e988b51a47a8c30075e508d..8271e20e55a8135c3570d2c82ad006d22d0567ca 100644
--- a/public/API/getBlogElements.php
+++ b/public/API/getBlogElements.php
@@ -1,6 +1,6 @@
 <?php
-include "config.php";
-include "mysql.php";
+include "./lib/config.php";
+include "./lib/mysql.php";
 
 $position = $_GET['position'];
 
diff --git a/public/API/config.php b/public/API/lib/config.php
similarity index 100%
rename from public/API/config.php
rename to public/API/lib/config.php
diff --git a/public/internal/getGravatar.php b/public/API/lib/getGravatar.php
similarity index 100%
rename from public/internal/getGravatar.php
rename to public/API/lib/getGravatar.php
diff --git a/public/API/mysql.php b/public/API/lib/mysql.php
similarity index 100%
rename from public/API/mysql.php
rename to public/API/lib/mysql.php
diff --git a/public/API/projectComments.php b/public/API/projectComments.php
new file mode 100644
index 0000000000000000000000000000000000000000..e39b3fe9ea3a2ba8d73822f313c1b1f869ca73d3
--- /dev/null
+++ b/public/API/projectComments.php
@@ -0,0 +1,23 @@
+<?php
+include "./lib/config.php";
+include "./lib/mysql.php";
+include "./lib/getGravatar.php";
+
+$article = $conn->real_escape_string($_GET["article"]);
+
+$responseJSON = [];
+
+$result = $conn->query("SELECT * FROM comments WHERE article='$article'");
+if ($result->num_rows > 0) {
+    while ($row = $result->fetch_assoc()) {
+        $commentElement = [
+            "name" => $row["name"],
+            "comment" => $row["comment"],
+            "gravatarURL" => get_gravatar($row["email"])
+        ];
+
+        array_push($responseJSON, $commentElement);
+    }
+}
+header('Content-Type: application/json');
+echo json_encode($responseJSON);
\ No newline at end of file
diff --git a/public/internal/comments.php b/public/internal/comments.php
index eb945f9f38765ea239a26b166ee321d43ea2c5b7..c62d38256f6b3a712b196b36b6b43ae5046e250b 100644
--- a/public/internal/comments.php
+++ b/public/internal/comments.php
@@ -1,28 +1,9 @@
 <?php
 
 function getComments($article){
-    include "mysql.php";
-    include "getGravatar.php";
-    echo("    <h2>Kommentare:</h2>");
-    $result = $conn->query("SELECT * FROM comments WHERE article='$article'");
-    if ($result->num_rows > 0) {
-        while($row = $result->fetch_assoc()) {
-            $name = $row["name"] . "<br>";
-            $gravatar = get_gravatar($row["email"]);
-            $content = $row["comment"];
-
-            echo(<<<EOF
-            <h3 class="commentTitle">$name</h3>
-            <div class="comment">
-                <img src="$gravatar">
-                <article class="commentArticle">
-                    <p class="commentText">$content</p>
-                </article>
-            </div>
-            EOF);
-        }
-    }
     echo(<<<EOF
+    <h2>Kommentare:</h2>
+    <jl-comments_display></jl-comments_display>
 <script src='https://www.hCaptcha.com/1/api.js' async defer></script>
 <div id="newComment">
     <form action="/newComment.php" method="post">