diff --git a/routes/routes-project.js b/routes/routes-project.js
index f98c3c65cca02b587798929253207cca389735fb..153498d0f98653182c2f83bbae1a08f09d16105c 100644
--- a/routes/routes-project.js
+++ b/routes/routes-project.js
@@ -381,11 +381,11 @@ module.exports = function (app) {
     });
   }
 
-  app.get('/projectlist', async function(req, res){
+
+  app.get('/projectlist-onelistforall', async function(req, res){
     let projectArr = []
     let isProject = true
     let firstId = 0
-    let webname = "";
 
     while (isProject == true) {
       //
@@ -427,8 +427,13 @@ module.exports = function (app) {
             else {
               projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/"+projectData[i].name
             }
+
+            // fill in pagesArr
             
           }
+          else {
+            // fill in projectArr
+          }
           let project = {
             logo: projectData[i].avatar_url,
             name: projectData[i].name,
@@ -449,4 +454,92 @@ module.exports = function (app) {
     })
   })
 
+  app.get('/projectlist', async function(req, res){
+    let projectArr = []
+    let pagesArr = []
+    let isProject = true
+    let firstId = 0
+    let webname = "";
+
+    while (isProject == true) {
+      //
+      //let runners = await getProjectsRunnersFromGitlab()
+      //console.log(runners)
+      //
+      let projects = await getProjectsFromGitlab(10, firstId)
+      let projectData = projects.data
+
+      if (projectData.length == 0) {
+        isProject = false
+      }
+      else {
+        for(let i = 0; i < projectData.length; i++){
+          // skip template project
+          if (projectData[i].name == "template_gitlab_page") {
+            continue
+          }
+          // M4_LAB logo for all projects that do not have logo
+          if (projectData[i].avatar_url == null) {
+            projectData[i].avatar_url = "https://m4lab.hft-stuttgart.de/img/footer/M4_LAB_LOGO_Graustufen.png"
+          }
+          // for all projects that have no description
+          if (projectData[i].description == "") {
+            projectData[i].description = "- no description -"
+          }
+          // websites
+          if (projectData[i].tag_list.includes('website')) {
+            // customize website name
+            if (projectData[i].name == "Visualization") {
+              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/visualization"
+            }
+            else if (projectData[i].name == "IN-Source") {
+              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/INsource"
+            }
+            else if (projectData[i].name == "3DS_Visualization_Cesium") {
+              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/3ds_visualization_cesium"
+            }
+            else {
+              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/"+projectData[i].name
+            }
+            // remove 'website' from tag list
+            const index = projectData[i].tag_list.indexOf('website');
+            if (index > -1) {
+              projectData[i].tag_list.splice(index, 1);
+            }
+
+            // fill in pagesArr
+            let pages = {
+              logo: projectData[i].avatar_url,
+              name: projectData[i].name,
+              weburl: projectData[i].web_url,
+              desc: projectData[i].description,
+              keywords: projectData[i].tag_list
+            }
+            pagesArr.push(pages)
+            
+          }
+          else {
+            let project = {
+              logo: projectData[i].avatar_url,
+              name: projectData[i].name,
+              weburl: projectData[i].web_url,
+              desc: projectData[i].description,
+              keywords: projectData[i].tag_list
+            }
+            projectArr.push(project) 
+          }
+           
+        }
+
+        firstId = projectData[projectData.length-1].id
+      }
+    }
+
+    res.render(lang+'/project/projectList', {
+      project: projectArr,
+      pages: pagesArr
+      // http://pagination.js.org
+    })
+  })
+
 };
\ No newline at end of file
diff --git a/views/DE/project/projectList.pug b/views/DE/project/projectList.pug
index 6a6047bdcea4b9ea6bcda905f04ae17c697a2f03..5e9d1878a5e9503f4392bed3dd289ed20e659a63 100644
--- a/views/DE/project/projectList.pug
+++ b/views/DE/project/projectList.pug
@@ -28,9 +28,40 @@ html(lang="de")
         }
   body
     div(class="container")
-        div(class="pt-4 pb-4")
-            input(id="searchInput", class="form-control form-control-dark w-100", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
-        h3(class="mb-3 font-weight-bold") Projekte
+        div(class="pt-4 pb-4 form-row")
+            div(class="form-group col-md-10")
+                //input(id="searchInput", class="form-control form-control-dark w-100", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
+                input(id="searchInput", class="form-control", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
+            div(class="form-group col-md-2")
+                select(class="form-control")
+                    option uncategorized
+        h3(class="mb-3 font-weight-bold") Projektinformationen
+        p(class="font-italic") Hier finden Sie Informationen zu den bei uns gehosteten Projekten, wie z.B. Projektbeschreibungen, Projektwebseiten, Visualisierungen, Demonstrationen.
+
+        div(class="container")
+            | <div class="row">
+            for item in pages
+                div(class="py-4 col-sm")
+                    div(class="card", style="width: 18rem;")
+                        div(class="title-container")
+                            h5(class="card-title-bottom-left") #{item.name}
+                            img(class="card-img-top", src=item.logo)
+                        div(class="card-body")
+                            div(class="row")
+                                each key in item.keywords
+                                    h6
+                                        span(class="badge badge-pill badge-primary px-2") #{key}
+                                        | &nbsp;
+                            div(class="row")
+                                div(class="col-9")
+                                    p(class="card-text") #{item.desc}
+                                div(class="col-3")
+                                    svg(class="bi bi-chevron-right", width="32", height="32", viewBox="0 0 20 20", fill="currentColor", xmlns="http://www.w3.org/2000/svg")
+                                        | <a xlink:href="#{item.weburl}" target="_blank"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"></path></a>
+            | </div>
+        
+        h3(class="mb-3 font-weight-bold") Projektdaten
+        p(class="font-italic") Hier finden Sie den direkten Zugang zu den Inalten der bei uns gehosteten Projekte.
 
         div(class="container")
             | <div class="row">