diff --git a/.gitignore b/.gitignore
index 3af5847..2f7276c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .idea/
 node_modules/
+package-lock.json
 
 public/*
 !public/index.html
diff --git a/package.json b/package.json
index 4564c23..0f85853 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "FörderFunke as a web app, the data only lives within the browser session locally",
   "dependencies": {
-    "@foerderfunke/matching-engine": "*"
+    "@foerderfunke/matching-engine": "0.3.3"
   },
   "scripts": {
     "cloneRepo": "rm -rf public/requirement-profiles && git clone https://github.com/Citizen-Knowledge-Graph/requirement-profiles public/requirement-profiles",
diff --git a/public/index.html b/public/index.html
index 2f3fbd2..65fa8aa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,14 +5,19 @@
     <title>FörderFunke</title>
 </head>
 <body>
-    <div id="output"></div>
+    <h3>User profile</h3>
+    <div id="userProfileDiv"></div>
+    <h4>Missing data points</h4>
+    <div id="missingDataPointsDiv"></div>
+    <h3>Report</h3>
+    <table id="reportTable"></table>
+
     <script src="./bundle.js"></script>
     <script>
         let userProfile = `
 @prefix ff: <https://foerderfunke.org/default#> .
 
-ff:mainPerson a ff:Citizen ;
-    ff:hasAge 24 .
+ff:mainPerson a ff:Citizen .
         `
 
         let shacl = `
@@ -24,6 +29,8 @@
     sh:property [
         sh:path ff:hasAge ;
         sh:maxExclusive 18 ;
+        sh:minCount 1 ;
+        sh:maxCount 1 ;
     ] .
         `
 
@@ -60,13 +67,38 @@
 }
             `
             let result = await MatchingEngine.runSparqlSelectQueryOnStore(query, store)
-            for (let row of result) {
-                document.getElementById("output").innerHTML += row.title + "<br>"
-            }
+            console.log("Req profile titles", result)
         }
 
         extractReqProfileNames()
 
+        async function validateAll() {
+            document.getElementById("userProfileDiv").textContent = userProfile
+
+            let turtleMap = await loadFiles()
+            let validateAllReport = await MatchingEngine.validateAll(userProfile, turtleMap.shacl, turtleMap.datafields, turtleMap.materialization)
+            console.log(validateAllReport)
+
+            for (let report of validateAllReport.reports) {
+                let tr = document.createElement("tr")
+                let td = document.createElement("td")
+                td.textContent = report.title ? report.title : report.filename
+                tr.appendChild(td)
+                td = document.createElement("td")
+                td.textContent = report.result
+                tr.appendChild(td)
+                document.getElementById("reportTable").appendChild(tr)
+            }
+
+            let missingData = validateAllReport.missingUserInputsAggregated
+            let missingDataPoints = []
+            for (let key of Object.keys(missingData)) {
+                document.getElementById("missingDataPointsDiv").innerHTML += missingData[key].usedIn.length + ": " + missingData[key].predicate.split("#")[1] + "<br>"
+            }
+        }
+
+        validateAll()
+
     </script>
 </body>
 </html>
