diff --git a/src/main/java/de/hsel/spm/baudas/web/ClusterDiagram.java b/src/main/java/de/hsel/spm/baudas/web/ClusterDiagram.java
new file mode 100644
index 0000000..4da9a7f
--- /dev/null
+++ b/src/main/java/de/hsel/spm/baudas/web/ClusterDiagram.java
@@ -0,0 +1,47 @@
+package de.hsel.spm.baudas.web;
+
+import com.google.gson.Gson;
+import de.hsel.spm.baudas.analysis.Cluster;
+import org.jetbrains.annotations.NotNull;
+
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.File;
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.nio.charset.StandardCharsets;
+import java.util.*;
+
+/**
+ * changes data from cluster analysis into a readable format
+ *
+ * @author Julian Hinxlage
+ * @version 0.1
+ * @since 0.1
+ **/
+@WebServlet("/clusters")
+public class ClusterDiagram extends HttpServlet {
+    @Override
+    protected void doGet(@NotNull HttpServletRequest req, @NotNull HttpServletResponse resp) throws IOException {
+        req.setCharacterEncoding(StandardCharsets.UTF_8.name());
+        resp.setCharacterEncoding(StandardCharsets.UTF_8.name());
+        resp.setContentType("application/json");
+        PrintWriter out = resp.getWriter();
+
+        Map<Integer, Map<String, String>> result = new HashMap<>();
+        Gson gson = new Gson();
+
+        if (req.getParameter("id") == null) {
+            out.print(gson.toJson(result));
+            return;
+        }
+        UUID uuid = UUID.fromString(req.getParameter("id"));
+        File file = Data.get(uuid);
+
+        Cluster cluster = new Cluster(file);
+        result = cluster.getResult();
+        out.print(gson.toJson(result));
+    }
+}
diff --git a/src/main/webapp/footer.jsp b/src/main/webapp/footer.jsp
index 5e91340..fbc7a5f 100644
--- a/src/main/webapp/footer.jsp
+++ b/src/main/webapp/footer.jsp
@@ -1,12 +1,14 @@
 <!--Anfang Skriptbereich-->
 
 <!--Script für Diagramme-->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"
+        integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
 
 
 <!--Script für Materlialize-->
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+<script type="text/javascript"
+        src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/google-palette@1.1.0/palette.min.js"></script>
 <script>
     M.AutoInit();
@@ -16,6 +18,7 @@
 <script src="js/week_overview.js"></script>
 <script src="js/shopping_times.js"></script>
 <script src="js/top_flop.js"></script>
+<script src="js/clusters.js"></script>
 
 <%--<script src="js/sold_articles.js"></script>--%>
 
diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
index 6879491..0f73f27 100644
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -63,6 +63,21 @@
         </div>
     </div>
 
+    <!--Gruppenübersicht-->
+    <div class="col s12 m12">
+        <div id="group_overview" class="card white">
+            <div class="card-content">
+                <div class="center">
+                    <span class="card-title center">Gruppenübersicht</span>
+                </div>
+                <div>
+                    <table id="cluster_table">
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!--Warenkorbanlyse-->
     <div id="shopping_card_analysis" class="col s12 m6">
         <div class="card white">
@@ -77,19 +92,7 @@
         </div>
     </div>
 
-    <!--Gruppenübersicht-->
-    <div class="col s12 m6">
-        <div id="group_overview" class="card white">
-            <div class="card-content">
-                <div class="center">
-                    <span class="card-title center">Gruppenübersicht</span>
-                </div>
-                <div>
-                    <p>Coming Soon</p>
-                </div>
-            </div>
-        </div>
-    </div>
+
 </div>
 
 <!--Marketing-Cards-->
diff --git a/src/main/webapp/js/cache.js b/src/main/webapp/js/cache.js
index 8876e59..e712e2b 100644
--- a/src/main/webapp/js/cache.js
+++ b/src/main/webapp/js/cache.js
@@ -38,6 +38,7 @@ function updateAll(uuid) {
     updateWeekOverviewChart(uuid);
     updateShoppingTimesChart(uuid);
     updateTopFlopChart(uuid);
+    updateClusters(uuid)
     //add new charts here.
 }
 
diff --git a/src/main/webapp/js/clusters.js b/src/main/webapp/js/clusters.js
new file mode 100644
index 0000000..f0dfd22
--- /dev/null
+++ b/src/main/webapp/js/clusters.js
@@ -0,0 +1,55 @@
+let cluster_result;
+
+function updateClusters(id) {
+    if(typeof id !== 'undefined') {
+        request('clusters', id).then(function (data) {
+            cluster_result = data;
+            drawClusterTable();
+        });
+    }else request('clusters').then(function(data) {
+        cluster_result = data;
+        drawClusterTable();
+    });
+}
+
+function drawClusterTable(){
+    let table = document.getElementById("cluster_table");
+    while(table.hasChildNodes()){
+        table.removeChild(table.firstChild);
+    }
+
+    let row = $("<thead>");
+    row.append("<tr>");
+    row.append("<td></td>");
+    for (x in cluster_result){
+        if(x == 0){
+            row.append("<td>" + "&oslash;" + "</td>");
+        }else{
+            row.append("<td>" + x + "</td>");
+        }
+    }
+    row.append("</tr>");
+    row.append("</thead>");
+
+
+    appendClusterTable(row, "Alter");
+    appendClusterTable(row, "Wohnort");
+    appendClusterTable(row, "Einkaufstag");
+    appendClusterTable(row, "Geschlecht");
+    appendClusterTable(row, "Familienstand");
+    appendClusterTable(row, "Einkaufsuhrzeit");
+
+
+    row.append("</tbody>");
+    $("#cluster_table").append(row);
+}
+
+function appendClusterTable(row, attrib){
+    row.append("</tbody>");
+    row.append("<tr>");
+    row.append("<td>" + attrib + "</td>");
+    for (x in cluster_result){
+        row.append($("<td>" + cluster_result[x][attrib] +"</td>"));
+    }
+    row.append("</tr>");
+}