diff --git a/routes/routes-project.js b/routes/routes-project.js
index bcbe71fdc3436d6c9d7c1b0461f71a2a070c7db5..2c4e25a843151b0507288865a14378671d73ab82 100644
--- a/routes/routes-project.js
+++ b/routes/routes-project.js
@@ -383,7 +383,6 @@ module.exports = function (app) {
 
   app.get('/projectlist', async function(req, res){
     let projectArr = []
-    let websiteArr = []
     let isProject = true
     let firstId = 0
     let webname = "";
@@ -405,45 +404,38 @@ module.exports = function (app) {
           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") {
-              webname = "https://transfer.hft-stuttgart.de/pages/visualization"
+              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/visualization"
             }
             else if (projectData[i].name == "IN-Source") {
-              webname = "https://transfer.hft-stuttgart.de/pages/INsource"
+              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/INsource"
             }
             else if (projectData[i].name == "3DS_Visualization_Cesium") {
-              webname = "https://transfer.hft-stuttgart.de/pages/3ds_visualization_cesium"
+              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/3ds_visualization_cesium"
             }
             else {
-              webname = "https://transfer.hft-stuttgart.de/pages/"+projectData[i].name
+              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/"+projectData[i].name
             }
-            let website = {
-              logo: projectData[i].avatar_url,
-              name: projectData[i].name,
-              weburl: webname,
-              desc: projectData[i].description
-            }
-            websiteArr.push(website)
+            
           }
-          // project repo
-          else {
-            let project = {
-              logo: projectData[i].avatar_url,
-              name: projectData[i].name,
-              weburl: projectData[i].web_url,
-              desc: projectData[i].description
-            }
-            projectArr.push(project)
+          let project = {
+            logo: projectData[i].avatar_url,
+            name: projectData[i].name,
+            weburl: projectData[i].web_url,
+            desc: projectData[i].description
           }
+          projectArr.push(project)  
         }
 
         firstId = projectData[projectData.length-1].id
@@ -451,8 +443,7 @@ module.exports = function (app) {
     }
 
     res.render(lang+'/project/projectList', {
-      project: projectArr,
-      website: websiteArr
+      project: projectArr
       // http://pagination.js.org
     })
   })
diff --git a/views/DE/project/projectList.pug b/views/DE/project/projectList.pug
index b21a0b0b4bc30a3aa0fd6b896b91d43f012b7038..b89bc77eea6969fa36e25fd8d2ca81333795010f 100644
--- a/views/DE/project/projectList.pug
+++ b/views/DE/project/projectList.pug
@@ -7,30 +7,49 @@ html(lang="de")
     link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap.min.css")
     link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/m4lab.css")
     link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    style.
+        .title-container {
+            position: relative;
+            color: white;
+        }
 
+        .card-title-bottom-left {
+            position: absolute;
+            bottom: 0px;
+            width: 100%;
+            color: black;
+            font-weight: bold;
+            background: rgb(255, 255, 255, 0.5);
+            text-align: left;
+            padding: 5px
+        }
+
+        .card-img-top {
+            height: 15vw;
+            object-fit: cover;
+        }
   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
-        table(class="table table-striped")
-            tbody
-                for item in project
-                    tr
-                        td
-                            img(src=item.logo, width="40", height="40")
-                        td <a href="#{item.weburl}" target="_blank">#{item.name}</a>
-                        td #{item.desc}
 
-        if website.length > 0
-            h3(class="mb-3 font-weight-bold") Websites
-            table(class="table table-striped")
-                for item in website
-                    tr
-                        td
-                            img(src=item.logo, width="40", height="40")
-                        td <a href="#{item.weburl}" target="_blank">#{item.name}</a>
-                        td #{item.desc}
+        div(class="container")
+            | <div class="row">
+            for item in project
+                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")
+                                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>
 
     // jQuery
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")
@@ -39,31 +58,28 @@ html(lang="de")
     script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
     // Header
     script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
+
+    // search: https://www.w3schools.com/howto/howto_js_filter_lists.asp
     script.
         function searchFunction() {
-            var input, filter, rows, col, txtValue;
-            var isFound = true;
-            input = document.getElementById("searchInput");
-            filter = input.value.toUpperCase();
+            var input = document.getElementById("searchInput")
+            var filter = input.value.toUpperCase()
             
-            rows = document.getElementsByTagName("tr");
-            for (i = 0; i < rows.length; i++) {
-                cols = rows[i].getElementsByTagName("td");
-                // check all cos
-                for (j = 0; j < cols.length; j++) {
-                    txtValue = cols[j].textContent || cols[j].innerText;
-                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
-                        isFound = true;
-                        break;
-                    } else {
-                        isFound = false;
-                    }
-                }
-                if (isFound) {
-                    rows[i].style.display = "block";
-                }
-                else {
-                    rows[i].style.display = "none";
+            var cards = document.getElementsByClassName("col-sm")
+            var cardTitle, cardText, titleValue, textValue
+            
+            var i
+            for (i = 0; i < cards.length; i++) {
+                cardTitle = cards[i].getElementsByClassName("card-title-bottom-left");
+                cardText = cards[i].getElementsByClassName("card-text");
+                
+                titleValue = cardTitle[0].textContent || cardTitle[0].innerText;
+                textValue = cardText[0].textContent || cardText[0].innerText;
+                
+                if (titleValue.toUpperCase().indexOf(filter) > -1 || textValue.toUpperCase().indexOf(filter) > -1) {
+                    cards[i].style.display = "block";
+                } else {
+                    cards[i].style.display = "none";
                 }
             }
         }
\ No newline at end of file